IE 和 Firefox 下padding-left的区别

<body>
<div>
<div style="background-color:#0000ff; width:100px; height:20px;"></div>
<div style="background-color:#ff0000; width:100px; height:20px; padding-left:20px;"></div>
<div style="background-color:#00ff00; width:100px; height:20px; padding-left:20px;">dd</div>
<div style="background-color:#808080; width:100px; height:20px; padding-left:20px;"><div>dfs</div></div>
</div>
</body>
</html>以上代码运行在firefox中，可以看到下面3个加了padding-left的div，宽度是120，把width和padding-left加一起了，
但在IE里 宽度还是 100
这个能否通过加一些什么属性让IE中也变成120

解决方案 »

  1.   

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

  2.   

    那要看你用什么标准了
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <div>
        <div style="background-color:#0000ff; width:100px; height:20px;"></div>
        <div style="background-color:#ff0000; width:100px; height:20px; padding-left:20px;"></div>
        <div style="background-color:#00ff00; width:100px; height:20px; padding-left:20px;">dd</div>
        <div style="background-color:#808080; width:100px; height:20px; padding-left:20px;"><div>dfs</div></div>
    </div>
    </body>
    </html>
      

  3.   

    在Firefox中，padding-left默认值为40px左右，而IE中为0，一般设置{margin:0;padding:0;}能解决
      

  4.   

    <div style="background-color:#808080; width:100px; height:20px; padding-left:20px;-padding-left:0;"><div>
    *{
        margin: 0;
        padding: 0;
    }
    火狐Ie用这个
    height: 715px;
    -height: 732px;
      

  5.   

    IE中和Firefox中，盒子模型（box model）不太一样，lz可以看看“跨浏览器开发”的这个帖子：http://topic.csdn.net/u/20100709/16/920c7c2c-c983-48f4-8f0f-da71d650bdbe.html?36062
      

  6.   

    使用标准模式就可以了 增加doctype <!DOCTYPE html>
      

  7.   

    多谢大家，搜了一下关于这个 !DOCTYPE ，一共3种，Strict、Transitional 以及 Frameset, firefox下用的是哪个，或者说 IE下用哪个会最接近firefox?
    还有哪些属性是和这个DOCTYPE相关的，  如果加上 Transitional， 这个padding-left 问题修复了， 怕会引起其他问题。另外
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    这个红色部分有什么用，我试了删掉也可以？
      

  8.   

    <!DOCTYPE html>就行，是HTML5推荐的 
    关于模式，lz可以看看 跨浏览器开发 的帖子：【分享】浏览器兼容性问题综述——正确的认识浏览器兼容性问题 里面有关于模式的内容