Fatal编程技术网
  • css/
  • 解决'；填充'；css问题

解决'；填充'；css问题

css internet-explorer firefox

解决'；填充'；css问题,css,internet-explorer,firefox,cross-browser,Css,Internet Explorer,Firefox,Cross Browser,因为IE和Firefox上的“填充”行为是不同的。解决此问题的最佳方法是什么？IE长方体模型（称为传统长方体模型）包括元素宽度/高度中的填充和边框 在IE盒子模型下，一个宽度为100px的盒子，每侧有2个填充，每侧有3个边框，每侧有7个边距，可见宽度为114px W3C长方体模型（标准长方体模型）将填充和边框从元素的宽度/高度中排除 在W3C长方体模型下，宽度为100px的长方体，每侧有2px填充，每侧有3px边框，每侧有7px边距，可见宽度为124px （来源：） 为了使IE使用W3C b

因为IE和Firefox上的“填充”行为是不同的。解决此问题的最佳方法是什么？

IE长方体模型（称为传统长方体模型）包括元素宽度/高度中的填充和边框

在IE盒子模型下，一个宽度为100px的盒子，每侧有2个填充，每侧有3个边框，每侧有7个边距，可见宽度为114px

W3C长方体模型（标准长方体模型）将填充和边框从元素的宽度/高度中排除

在W3C长方体模型下，宽度为100px的长方体，每侧有2px填充，每侧有3px边框，每侧有7px边距，可见宽度为124px


（来源：）

为了使IE使用W3C box模型（这是其他浏览器所使用的），您的页面需要以严格模式呈现。默认情况下，IE以“怪癖”模式渲染

要在IE中触发严格模式，必须指定doctype。您可以使用以下任意doctype：

HTML4严格：

<div style='width:500px; height:500px; padding:50px;'> </div>
XHTML 1.0标准：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >
XHTML 1.0过渡版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
您的doctype必须首先出现在页面上。它甚至在
标记之前，在它自己的行上

有关怪癖/严格模式的更多信息，请参见：

Firefox和IE之间的行为不仅不同，甚至在不同版本的IE之间也是不同的

最好的方法是使用CSS选择器而不是内联样式，并使用IE条件注释根据浏览器版本加载不同的样式表。它允许您创建一个主样式表，然后修复其他主样式表中的任何异常。

另一个选项是为遇到问题的特定浏览器添加条件注释，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我不确定这是不是最好的方法，但我认为没有人真正明白这一点。我想我们都尽了最大的努力，希望随着时间的推移情况会好转，这样就不需要这些东西了。

非常感谢您的明确解释！我试过了，但它似乎只在IE6上有效，而不是IE7和IE8？@Alan:应该也在IE7和IE8上工作。清除缓存。请参阅安德鲁的帖子。这解释得很清楚。 
<!--[if IE 6]>
     <style type="text/css">
          #thisdiv { width:500px; height:500px; padding:50px; }
     </style>
<![endif]-->