Internet Explorer和FireFox之间的CSS顶端属性不同

问题描述：

我一直在试图在*中搜索这个，但我找不到答案。Internet Explorer和FireFox之间的CSS顶端属性不同

浏览器，我使用的测试：火狐3.6.8 Internet Explorer的6.029

我创建一个盒子，通过位置定位是：绝对的顶部和左侧属性：

#testBox { 
    top:10px; 
    left:480px; 
    width:220px; 
    padding:3px; 
    position:absolute; 
    font-size:14px; 
    text-align:center; 
} 

<div> 
    <div> 
    <span style="position:relative;"> 
    <span id="testBox"> 
    testtesttesttesttest<br /> 
    </span> 
    </span> 
</div>

发生的事情是“测试盒”跨度比IE浏览器更高。有什么我可以解决这个问题吗？谢谢，罗伊

现场小提琴：http://jsfiddle.net/tTcjS奇怪的是，它显示为IE6中的效果相同的Chrome 5 – 2010-10-13 20:46:53

答

ie6，将是问题，具体是6部分。

您很可能需要在不同的样式表中定义不同的规则。考虑条件语句：http://creativebits.org/webdev/ie_conditional_css

您也可以尝试使用一个CSS复位，它会使事情变得更容易了线： http://www.yahooapis.com/yui/3/cssreset/

+1“特别是6” – hookedonwinter 2010-10-13 20:38:54

@Pekka OP说意外的行为存在在ie6中，所以我假设。甚至没有想到问题可能在FF。我的错。 – hookedonwinter 2010-10-13 20:42:30

@hookedonwinter其实没有，我似乎是错的：它在IE6和Chrome中看起来完全相同，但在IE8和FF中没有空间。似乎是一个空白问题。这很奇怪*！我立场纠正。 – 2010-10-13 20:43:51

答

我不知道非hackish的方法，但你可以使用有条件的HTML（即，黑客）在IE6中改变顶端。把这个放在你的CSS之后，放在HTML中。

<!--[if lt IE 7]> 
    <style type="text/css"> 
      #testBox { 
       top: 20px; // or whatever 
      } 
    </style> 
<![endif]-->

Internet Explorer和FireFox之间的CSS顶端属性不同

相关推荐