IE定位问题
在除 IE 之外的所有浏览器中，在 euroworker.no/order 上，“produkt”一词下方的绿色小箭头位于我的 div 容器的顶部。为什么这在 IE 中不起作用？事实是，它在 IE 中的四个页面中的两个上运行，但在其他浏览器中则在所有四个页面上运行。所有页面的构建方式都相同，但对于 IE，它会在 roundbigbox 上方 20px 处显示此内容。
大家有什么想法吗？
Doctype：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
顶部进度指示器的 CSS：
#checkoutProgress
{
width: auto;
padding-top: 1em;
height: 30px;
overflow:hidden;
font-family: "Helvetica";
font-size:18px;
float:left;
/* margin-bottom:22px;*/
margin-left:0px;
}
#checkoutProgress a
{
padding: 10px;
/*border-width: 2px;
margin-right: 20px;*/
text-decoration:none;
font-size: 17.26px;
color:#dadada;
text-transform:uppercase;
}
#checkoutProgress a:hover
{
padding: 10px;
/*border-width: 2px;
margin-right: 20px;*/
text-decoration:none;
font-size: 17.26px;
color:#818072;
}
/* completed steps */
#checkoutProgress a.completed
{
border-color: #70D66D;
}
/* current step */
#checkoutProgress a.active
{
/* border-color: #ADD8E6;*/
font-weight: bold;
/*background-color: #fffccc;
border-color: #ADD8E6;*/
background-image:url(../../upload/urhere_arr.png);
background-position:bottom center;
/*padding-left:15px;*/
color:#a3a398;
}
对于框：
div #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-top:10px;
padding-bottom:0px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
fieldset css：
fieldset.container
{
border: 0;
}
以及一些 HTML：
<fieldset class="container">
<div id="checkoutProgress" class="progressCart">
<a href="/order" class=" active" id="progressCart"><span>Produkt</span></a>
<a href="/checkout/selectAddress" class="completed " id="progressAddress"><span>kunde info</span></a>
<a href="/checkout/shipping" class="completed " id="progressShipping"><span>Leveringsmåte</span></a>
<a href="/checkout/pay" class="" id="progressPayment"><span>Betaling & Fullfør</span><</a>
</div>
</fieldset> </div>
<form action="/order... >
<input type="hidden"...>
<div id="roundbigbox">
<p id="pro">Produkter</p>
More content
</div>
In every browser but IE, on euroworker.no/order the little green arrow under the word "produkt" sits on top of my div container. Why in the world does this not work in IE? Thing is, it works on two pages out of four in IE but all four in other browsers. All the pages are built the same, but for IE it displays this thing like 20px above the roundbigbox.
Any ideas guys?
Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS for the top prgress indicator:
#checkoutProgress
{
width: auto;
padding-top: 1em;
height: 30px;
overflow:hidden;
font-family: "Helvetica";
font-size:18px;
float:left;
/* margin-bottom:22px;*/
margin-left:0px;
}
#checkoutProgress a
{
padding: 10px;
/*border-width: 2px;
margin-right: 20px;*/
text-decoration:none;
font-size: 17.26px;
color:#dadada;
text-transform:uppercase;
}
#checkoutProgress a:hover
{
padding: 10px;
/*border-width: 2px;
margin-right: 20px;*/
text-decoration:none;
font-size: 17.26px;
color:#818072;
}
/* completed steps */
#checkoutProgress a.completed
{
border-color: #70D66D;
}
/* current step */
#checkoutProgress a.active
{
/* border-color: #ADD8E6;*/
font-weight: bold;
/*background-color: #fffccc;
border-color: #ADD8E6;*/
background-image:url(../../upload/urhere_arr.png);
background-position:bottom center;
/*padding-left:15px;*/
color:#a3a398;
}
For the box:
div #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-top:10px;
padding-bottom:0px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
fieldset css:
fieldset.container
{
border: 0;
}
And some HTML:
<fieldset class="container">
<div id="checkoutProgress" class="progressCart">
<a href="/order" class=" active" id="progressCart"><span>Produkt</span></a>
<a href="/checkout/selectAddress" class="completed " id="progressAddress"><span>kunde info</span></a>
<a href="/checkout/shipping" class="completed " id="progressShipping"><span>Leveringsmåte</span></a>
<a href="/checkout/pay" class="" id="progressPayment"><span>Betaling & Fullfør</span><</a>
</div>
</fieldset> </div>
<form action="/order... >
<input type="hidden"...>
<div id="roundbigbox">
<p id="pro">Produkter</p>
More content
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的 HTML 片段看起来格式不正确，有几个结束标签和结束标签不匹配！
首先要做的是使用 w3c 验证器 验证您的 XHTML（在严格的文档类型中非常重要）。使用 IE 时要注意的另一件事是随机空格 - 不要问我为什么，但请尝试确保没有任何无关的空格。我认为 IE 中的这些“随机”行为通常是这些问题的根源。
Your HTML fragment appears badly formed, there are a couple of ending and closing tags that dont have a match!
First thing to do is validate your XHTML (very important in strict doctype) with the w3c validator. Another thing to look out for with IE is random whitespace - don't ask me why, but try making sure there isn't any extraneous whitespace. These kind of "random" behaviours in IE usually have a source in these problems, I think.