以下代码在Chrome和IE中的显示方式不同

Question

    <div class="wholediv">
       <div class="rightdiv">
         <strong>Your Company Name</strong><br />
         Evergreen Terrace 742<br />
         Kansas Missouri<br />
         Phone: 432-653-3121<br />
         sales@thetiecompany.com   </div>
       <div class="sitemap">
       <a href="#">Home</a>&nbsp;|&nbsp;<a href="#">Sitemap</a>&nbsp;|&nbsp;<a href="#">Contact Us</a></div>
       </div>
</div>

    div div.wholediv
{
height:97px;
width:500px;
float:left;
background-color:#F0F0F0;
}
div div.sitemap
{ 
  background-color:#F0F0F0;
  position:relative;
  float:right;
  width:200px;
  height:87px;
  padding-right:10px;
  padding-top:10px;
   font: 0.7em Tahoma, sans-serif;
 font-weight:bold;  
}
div div.rightdiv
{
float:left;
position:static;
background-color:#F0F0F0;
width:200px;
height:87px;
padding-left:10px;
padding-top:10px;
font: 0.7em Tahoma, sans-serif;
}

IE显示如下。

Chrome显示如下。

​

Answer 1

您有一个同时具有宽度和填充的块级元素。这至少有一件事会在IE中引起麻烦，因为不同的盒子模型。

更多关于盒子型号的信息：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

在添加图片后进行编辑:至少在这里不需要使用position: static & position:relative。您可以通过删除元素中的填充来开始调试。填充可能是IE中打破“站点地图”-row的东西。

您没有在代码中包含包含logo-image等内容的部分，因此无法对该部分进行注释。我认为你应该阅读关于盒子模型的知识并应用它。另外，位置的使用方式看起来相当随机，所以你可以稍微研究一下。有关在http://www.quirksmode.org/css/position.html中定位的详细信息