我很难让IE6在我尝试创建的布局中“表现得很好”(也许它太具体了,我不得不尝试另一种方法。)

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

我正在使用960.gs网格系统,并且定义了许多自定义样式(包括IE6的有条件包括的样式表)。如果您在Firefox或Chrome或IE8(尚未测试过7)中检查页面的中心,则会看到我正在尝试实现的布局,但是在IE6中,这似乎获得了额外的填充和/或余量。 Flash图片的右侧。为了解决这个额外的差距,我已经奋战了几个小时,但似乎并没有打破它,所以我需要一点帮助:)

提前致谢。

编辑代码示例:

的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;
宽度:280px;
background-image:url(“ ../ img / template / tabs.png”);
}

options1 #web a {

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


}

options1 li#web a:悬停,#options1 li#web.active a {

background-position: 0px -249px;


}

options1 #project a {

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


}

options1 li#project a:悬停,#options1 li#project.active a {

background-position: 0px -332px;


}

options1 #itsolution a {

background-position: 0px -166px;


}

options1 li#itsolution a:悬停,#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:悬停,#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;


}

最佳答案

可能是IE6 Double Margin Bug吗?

如果您用谷歌搜索该术语,则有很多链接,但这听起来像是您描述的罪魁祸首。

07-28 05:07