Question

我们的网站上只有在IE（7＆amp; 8测试版）中有一个非常烦人的布局问题，Firefox和Chrome工作正常。问题出在这个页面上：

http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html

问题代码是报告图像应显示在右侧文本的左侧。我们有一个简单的包含项目，一个内部浮动到左边，另一个浮动到左边。两者的宽度都小于外部DIV的总和。这是一段无效的代码示例：

<div class="resourceitem">
    <div class="resourceleft">
        Test LEFT
    </div>
    <div class="resourceright">
        Test RIGHT
    </div>
</div>

相关的CSS只是：

.resourceitem {
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
}

div.resourceleft {
    float: left;
    margin-left: 20px;
    width: 156px;
}

div.resourceright {
    float: left;
    padding: 0;
    width: 268px;
}

非常感谢任何帮助，它让我疯狂！

干杯，克里斯。

更新 - 修正了它。

阿。好的找到问题的人 - 这取决于我的响应式链接代码和IE8的开发人员工具，显示不实际适用的规则。这个规则是在fms-res.css文件中，但这仅用于理解媒体查询的浏览器，并且宽度为> 980px。 IE8使用默认值。仅限桌面文件，名为m-equiv.css - 此文件中缺少规则。 Web Developer Toolbar非常无用地将规则显示为应用于fms-res.css文件中的元素，即使实际上它们没有。我忘记了Developer Tools的这种效果，我们通常看到我们的print stylesheet（print.css）规则显示，即使它们不适用（除非实际打印时）。

非常感谢捐款人员，对不起，最终这是一个愚蠢的修复。

干杯！

Answer 1

从以下代码中删除</a>这是一个额外的代码（可能是拼写错误）并在IE中造成问题：

<div class="resourceleft">
    <img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
    </a>
</div>

注意：每个<div class="resourceleft">都有一个额外的</a>

Answer 2

更新 - 修正了它。

阿。好的发现问题的人 - 这取决于我的响应链接代码和IE8的开发人员工具显示实际上不适用的规则。这个规则是在fms-res.css文件中，但这仅用于理解媒体查询的浏览器，并且宽度为> 980px。 IE8使用默认值。仅限桌面文件，名为m-equiv.css - 此文件中缺少规则。 Web Developer Toolbar非常无益地将规则显示为应用于fms-res.css文件中的元素，即使实际上它们没有。我忘记了Developer Tools的这种效果，我们通常看到我们的print stylesheet（print.css）规则显示，即使它们不适用（除非实际打印时）。

非常感谢捐款人员，对不起，最终这是一个愚蠢的修复。

干杯！

IE8中的简单浮动DIV布局无法正常工作

2 个答案: