IE6中的Css问题,div宽度不如父级宽

时间:2009-10-25 11:06:33

标签: css html internet-explorer-6

可以查看问题here

DIV#target不如 IE6 中的父div宽,只有 IE6

您可以点击右上角的编辑,即时修改。

对于那些看不到内容的人,这里是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>

2 个答案:

答案 0 :(得分: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上的上述宽度样式无法解释的位置。

在此实例中,填充的工作方式相同,并保持宽度有效。

答案 1 :(得分:0)

我看到了这个页面,但现在它已经空了。人们是否正在编辑并删除内容?

无论如何,我会注意IE的边界不同,这可能会改变确切的宽度。这是否回答了你的问题?