如何使用 Grid 960 和自定义样式修复 IE6 中的 CSS 布局问题

Question

我很难让 IE6 与我正在尝试创建的布局“玩得很好”（也许它太具体了，我必须尝试另一种方法。）

可以在http://myersprojects.com/uk/en/index.html找到相关页面

我正在使用 960.gs 网格系统，并定义了许多自定义样式（包括 IE6 的有条件包含的样式表）。如果您检查 Firefox 或 Chrome 或 IE8 中的页面中心（尚未测试 7），您将看到我正在尝试实现的布局，但是在 IE6 中，这似乎获得了额外的填充和/或边距闪光灯图像的右侧。我已经奋斗了几个小时试图消除这个额外的差距，但似乎并没有打破它，所以我寻求一点帮助:)

提前致谢。

编辑代码示例：

HTML

<div id="body" class="container_16 clearfix"> 
    <div class="grid_5 omega"> 
        <div id="options1"> 
            <ul> 
                <li id="web" class="selected"><a href="web_and_digital_projects.php">Web &amp; Digital Project Delivery</a></li> 
                <li id="project""><a href="projects_and_programmes.php">Programme &amp; Project Support</a></li> 
                <li id="itsolution"><a href="it_solutions.php">Web &amp; Digital Project Delivery</a></li> 
            </ul> 
        </div> 
    </div> 
    <div class="grid_6 alpha omega"> 
        <div id="slide"> 
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="378" height="248" id="FlashID" title="Myers Projects Introduction Movie"> 
              <param name="movie" value="img/swf/test.swf" /> 
              <param name="quality" value="high" /> 
              <param name="wmode" value="opaque" /> 
              <param name="swfversion" value="6.0.65.0" /> 
              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> 
              <param name="expressinstall" value="/uk/en/Scripts/expressInstall.swf" /> 
              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> 
              <!--[if !IE]>--> 
              <object type="application/x-shockwave-flash" data="img/swf/test.swf" width="378" height="248"> 
                <!--<![endif]--> 
                <param name="quality" value="high" /> 
                <param name="wmode" value="opaque" /> 
                <param name="swfversion" value="6.0.65.0" /> 
                <param name="expressinstall" value="/uk/en/Scripts/expressInstall.swf" /> 
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> 
                <div> 
                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> 
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> 
              </div> 
                <!--[if !IE]>--> 
            </object> 
              <!--<![endif]--> 
          </object> 
      </div> 
    </div> 
    <div class="grid_5"> 
        <div id="options2"> 
            <ul> 
                <li id="change" class="selected"><a href="enterprise_change_and_risk_management.php">Enterprise Change &amp; Risk Management</a></li> 
                <li id="it""><a href="strategic_it_management.php">Strategic IT Management</a></li> 
                <li id="training"><a href="training_and_resource_provision.php">Training &amp; Resource Provision</a></li> 
            </ul> 
        </div> 
    </div> 
</div> 

还有 CSS

#options1 ul, #options2 ul {
list-style: none outside none;
margin: 0;
padding:  0;    

}

options1 li, #options2 ul {

margin: 0;
padding: 0;
text-indent: -9999px;   

}

options1 a, #options2 a {

背景重复：不重复； 显示：块； 向左飘浮; 高度：82px； 宽度：280 像素； 背景图片:url("../img/template/tabs.png");
}

options1 #web 一个 {

border-bottom: 1px solid white;
background-position: 0px 0px;

}

options1 li#web a:hover, #options1 li#web.active a {

background-position: 0px -249px;    

}

options1 #project 一个 {

border-bottom: 1px solid white;
background-position: 0px -83px;

}

options1 li#project a:hover, #options1 li#project.active a {

background-position: 0px -332px;    

}

options1 #itsolution a {

background-position: 0px -166px;

}

options1 li#itsolution a:hover, #options1 li#itsolution.active a {

background-position: 0px -416px;    

}

options2 #改变一个{

border-bottom: 1px solid white; 
background-position: -281px 0px;

}

options2 li#change a:hover, #options1 li#change.active a {

background-position: -281px -249px;

}

options2 #it a {

border-bottom: 1px solid white;
background-position: -281px -83px;

}

options2 li#it a:hover, #options1 li#it.active a {

background-position: -281px -332px;

}

options2 #训练一个{

background-position: -281px -166px;

}

options2 li#training a:hover, #options1 li#training.active a {

background-position: -281px -416px;

}

幻灯片{

height: 248px;
width: 378px;
background-color: #c2e2fa;
border-left: 1px solid white;
border-right: 1px solid white;

}

IE6 条件 CSS 内容

#options1 a, #options2 a {
border: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
height: 82px;
clear: both;
display: inline;

}

幻灯片{

display: inline;
border: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
background-color: #c2e2fa;  

}

幻灯片{

\width: 328px;
w\idth: 328px;

}

options1, #options2, #options1 ul, #options2 ul {

overflow: hidden;
display: inline;
float: left;

}

Answer 1

可能是IE6 Double Margin Bug？

如果你用谷歌搜索这个词，会有很多链接，但这听起来可能是你描述的罪魁祸首。