2010-04-09 133 views
1

在除IE以外的每个浏览器上,euroworker.no/order“produkt”一词下的小绿箭头位于我的div容器之上。为什么在这个世界里这不适用于IE?事情是,它在IE的四个页面中工作,但在其他浏览器中全部四个。所有的页面都是相同的,但是对于IE来说,它显示的这个东西就像roundbigbox上方的20px。IE浏览器定位问题

任何想法家伙?

文档类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

CSS的顶部prgress指标:

#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; 
    } 

字段集的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> 

回答

1

你的HTML片段出现格式错误,有一对夫妇结束,并且没有一个比赛结束标记!

首先要做的是使用w3c validator验证您的XHTML(非常重要的严格文档类型)。另一件需要注意的事情是随机的空白 - 不要问我为什么,但要确保没有任何无关的空白。我认为,IE中的这些“随机”行为通常会在这些问题中产生问题。

+0

刚刚查看了你的网站 - 你也有一些Z索引问题。绝对是时候打验证者! :) – dmp 2010-04-09 08:56:31

+0

伟大的想法!我会这样做的。 – Kyle 2010-04-09 09:00:47

+0

好像我的苹果机刚刚坠毁,所以现在不做编辑,谢谢。 – Kyle 2010-04-09 09:17:42