Question

我有一个使用HTML和CSS在Dreamweaver中构建的网站。

在所有浏览器（Chrome，Firefox，Safari）中，布局正是我想要的，除了Internet Explorer 7，其中底行图像或图像的布局完全混乱 - 太高或太多了对。我不知道为什么会发生这种情况，我是一个初学者并尝试了所有我能想到的，如果有人能提供帮助，我将非常感激。

该网站位于：http://www.mediadarling.co.uk/clients/lenistudios/

提前致谢！

Answer 1

你的CSS中有几个我不太明白的地方：

#movers-row {
    ...
    margin: -120px 0 0 120px;

为什么负的上限？这似乎是在IE 7中将图像拉得太远的原因。我真的不明白为什么它不在其他浏览器中;我想是与浮标有关。

#footer {
    ...
    margin-top: -130px;

这是否与另一个负的上边界相关？

Anyhoo，我认为您可以通过以下方式解决您在IE 7中的问题：

删除这两个负顶边距
仅在IE 7中添加margin-top: 10px;到#imagerow（可能还有IE 6）（由于一些神秘的IE原因，填充顶部不适用于浮点数）

请参阅此处，例如代码：http://www.pauldwaite.co.uk/test-pages/5220698/

您的HTML中也有一些验证错误。我不认为它们会导致您的问题，但我先修复它们，因为当您尝试追踪IE错误时，您真的不希望验证错误。 Here’s the validation of the page.

Answer 2

之后：<div id="rotxt">Roll over images to see larger versions</div> 地点：<p class="clear"><br /></p>

.clear包含CSS：clear: both;

Answer 3

你可以使用IE的条件语句，这是一个例子：

<!--[if IE 7]><link href="css/layoutIE7.css" rel="stylesheet" type="text/css" /><![endif]-->

这是放在<head>，并假设你有一个额外的css文件与IE更正。

P.S。你需要将IE特定的CSS规则添加到IE CSS文件中，这样它将在IE和大多数浏览器中工作......

在我的例子中，我使用“if IE 7”，意味着它是IE版本7，但你可以使用组合和其他版本。

编辑：用另一个div围绕亲爱的客人，文本，图片和div #rotxt，并确保它实际上用一个简单的规则包围它：

.surround {height: auto; overflow: hidden;}

这是跨浏览器，不需要条件CSS。

编辑2：好的，这里的问题是在几个地方...... 你把图像漂浮到右边，好吧我建议使用带有浮动的div来标题+ text + caption。然后用aditional div包围图像的div和新的div。这个高度为：auto和overflow：hidden。然后删除图像主div的浮动，并删除上边距; 最后，最好将橙色矩形添加为图像块之后的元素（这样可以保证社交div出现在正确的位置）。

所以，我的建议是这样的（抱歉不是真正的标签）：

[新周边div] [主图像div] 图片 [/ main image div]

[周围的div] 标题文本字幕 [/周围的div] [/ new surround div]

[images div] 图片 [/ images div]

[sepatator div]（可选） [/ sepatator div]

[社交div] [/ social div]

网站布局只在IE中乱搞

3 个答案: