1

我们的网站只有在 IE（7 和 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 开发人员工具栏非常无益地将规则显示为应用于 fms-res.css 文件中的元素，即使实际上它们没有。我忘记了开发者工具的这种效果，我们通常会看到我们的打印样式表（print.css）规则显示，即使它们不适用（除非实际打印时）。

非常感谢大家的贡献，很抱歉最终解决了一个愚蠢的问题。

干杯!

4

2 回答 2

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>

于 2012-08-24T12:21:38.820 回答
0

更新 - 修复它。

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

非常感谢大家的贡献，很抱歉最终解决了一个愚蠢的问题。

干杯!

于 2012-08-24T14:37:41.950 回答