Question

有没有办法让IE7正确解释CSS，就像在Firefox中一样？我有一个width + padding div属性的问题。

在FF / IE8 + div上自动扩展，并且此div中的内容正确居中，但在IE7中div移动到右侧，溢出隐藏了其余内容。请看下面的图片：

padding preview http://uploadpic.org/storage/2011/D8AHkOOwH8DhIFlogShP0zhPG.jpg

有没有办法破解这个？一些css代码：

#center { width: 50%; height:auto;  position:relative; padding-left:500px; }
#both { width:1000px; float:right; }
#content_home { width:698px; margin:0 auto; min-height:400px;
     float:left; position:relative;  }

HTML代码：

<div id="center">
    <div id="both">
        <div id="content_home">
            <p>...</p>
        </div>
        <div id="right">
            <p>...</p>
        </div>
    </div>
    <div class="clear"></div>
</div>

Answer 1

最好的方法是使用特定样式定位IE7及更低版本，因为它们错误地应用了盒子模型。您可以使用条件正文标记来执行此操作，例如

  <!-- Conditional CSS include for IE6 and below -->
  <!--[if lt IE 7 ]><body class='ie6'><![endif]-->
  <!-- Conditional CSS include for IE7 -->
  <!--[if IE 7 ]><body class='ie7'><![endif]-->
  <!-- Conditional CSS include for IE8 -->
  <!--[if IE 8 ]><body class='ie8'><![endif]-->
  <!-- Conditional CSS include for IE9 -->
  <!--[if IE 9 ]><body class='ie9'><![endif]-->
  <!--[if !IE]>--><body><!--<![endif]-->

然后在你的CSS ......

body.ie7{
  width:12345px;
}

Answer 2

不确定这是否适用于您的情况，但您是否尝试过IE7.js修复？这是一个方便的javascript文件，旨在使IE浏览器标准兼容。值得一试。

http://code.google.com/p/ie7-js/

firefox / ie7上的div填充

2 个答案: