以下代码在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

添加图片后

编辑： 至少位置：静态＆amp;位置：这里不应该像你使用它们那样需要亲戚。您可以通过从元素中删除填充来开始调试。填充可能是IE中破坏“站点地图”的问题。

您没有在代码中包含具有徽标图像等的部分，因此无法对该部分发表评论。我想你应该阅读一下盒子模型并应用它。使用位置的方式也很随意，所以你可以稍微研究一下。关于http://www.quirksmode.org/css/position.html

中定位的更多信息