IE6中的CSS问题，div宽度不如父级宽答案

【问题标题】：Css issue in IE6,div width not as wide as parentIE6中的CSS问题，div宽度不如父级宽
【发布时间】：2009-10-26 12:25:47
【问题描述】：

可以检查问题here

DIV#target 在 IE6 中没有父 div 宽，仅在 IE6 中。

您可以通过点击右上角的EDIT即时修改它。

看不到内容的，这里是html部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta name="verify-v1" content="IWNE8753ok3185rownXmHDc6EZFBP/eMDlHCHUQPaEk=" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />


    <title>51Hired</title>
    <link rel="shortcut icon" href="static/favicon.ico" />
    <link href="style/layout.css" rel="stylesheet" type="text/css" />
    <link href="style/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menus">
    <a href="/index.html?edit">EDTI</a>&nbsp;&nbsp;
</div>
<div class="clear"></div>
<div id="body" style="width:850px;border:1px solid blue;">
    <div id="target" style="border:1px solid red;width:100%;margin:0;">
    something
    </div>


    <div class="biankuang mag_t">
      <div class="sub_i_title">
            <a href="/jobs.php" style="float:right;color:#D64F00;margin-right:10px;">More&raquo;&raquo;</a>
            <h2>Hostest jobs</h2>                                                             
      </div>
      <div class="sub_i_b clear">

          <ul class="info">
          <li><span>2009-10-05</span><a class="job-hyperlink" title="\u670d\u88c5\u8bbe\u8ba1\u5e08" href="/jobs/1172/Designer" target="_blank">Designer</a></li><li><span>2009-09-21</span><a class="job-hyperlink" title="\u9500\u552e\u7ecf\u7406" href="/jobs/158/Manager" target="_blank">Manager</a></li><li><span>2009-09-20</span><a class="job-hyperlink" title="\u517c\u804c\u4e1a\u52a1\u7ecf\u7406" href="/jobs/580/Manager" target="_blank">Manager</a></li><li><span>2009-09-21</span><a class="job-hyperlink" title="\u9500\u552e\u4ee3\u8868" href="/jobs/159/SaleRepresentative" target="_blank">Sale Representative</a></li><li><span>2009-10-01</span><a class="job-hyperlink" title="\u4ea7\u54c1\u7814\u53d1\u5de5\u7a0b\u5e08" href="/jobs/744/Engineer" target="_blank">Engineer</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u4e1a\u52a1\u4e3b\u7ba1" href="/jobs/309/Manager" target="_blank">Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u4e1a\u52a1\u7ecf\u7406" href="/jobs/61/Manager" target="_blank">Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u5ba2\u6237\u7ecf\u7406" href="/jobs/228/Customer Manager" target="_blank">Customer Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u9500\u552e\u4ee3\u8868" href="/jobs/242/Sale Representative" target="_blank">Sale Representative</a></li><li><span>2009-10-04</span><a class="job-hyperlink" title="QA\u7ba1\u7406" href="/jobs/288/QA Management" target="_blank">QA Management</a></li>               
          </ul>

      </div>
    </div>


</div>

</body>
</html>

【问题讨论】：

因为你提交了一个空白页面，游戏结束了...

标签： css html internet-explorer-6

【解决方案1】：

链接 CSS (style/index.css) 中的这一行：

 .sub_i_b ul li{float:left; margin-right:45px; width:350px;}

应改为：

 .sub_i_b ul li{float:left; padding-right:45px; width:350px;}

边距在 IE6 中被抛出，因为它被应用到指定区域的宽度之外，并将整个部分向外推，div#target 上的上述宽度样式无法解释。

在这种情况下，填充的工作原理相同，并保持您的宽度正常工作。

【讨论】：

哦，它有效，但我仍然不知道您所说的“它应用于区域外部”是什么意思，你能解释一下吗？
@eof，你能用一个简短的例子来说明一下吗？

【解决方案2】：

我看到了这个页面，但现在它是空的。人们是否正在编辑它并删除内容？

无论如何，我会注意 IE 对边框的计算方式不同，这可能会改变确切的宽度。这是否回答了您的问题？

【讨论】：

我删除了空白页，现在大家应该可以了。不要再提交空白页了...