站点布局仅在 IE 中混乱答案

【问题标题】：site layout messing up in IE only站点布局仅在 IE 中混乱
【发布时间】：2012-06-12 00:28:23
【问题描述】：

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

布局正是我想要的所有浏览器（Chrome、Firefox、Safari）中的布局，除了 Internet Explorer 7，其中底行图像或图像的布局完全混乱 - 要么太高要么太多正确的。不知道为什么会这样

网站在这里：http://www.mediadarling.co.uk/clients/lenistudios/

提前致谢！

【问题讨论】：

你确定吗？它在 IE8 和 Chrome 中看起来相同（也很好）。
请指定您正在测试的 IE 版本。
感谢您的 cmets @GolezTrol 和 @Spudley - IE7 出现问题，我仍然无法解决。
您是否尝试过我的建议，即用建议样式的 div 围绕这些元素？

标签： html css internet-explorer-7 dreamweaver

【解决方案1】：

你的 CSS 中有几处我不太明白：

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

为什么是负的上边距？这似乎是在 IE 7 中将图像拉得太远的原因。我真的不明白为什么它不在其他浏览器中；我猜这与所涉及的花车有关。

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

这与其他负上边距有关吗？

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

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

查看示例代码：http://www.pauldwaite.co.uk/test-pages/5220698/

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

【讨论】：

@Paul D. Waite，感谢您的建议，我左右都试过了，但似乎没有任何改变..？
@noobug：当然，抱歉，值得一试。我现在已经正确查看了 CSS，我将编辑我的答案。
@Paul D. Waite 非常感谢你。我试图复制你的建议，但对我来说它在 IE7 中仍然出错。当我从本教程中复制技术时，移动器行具有这些边距：css-tricks.com/equidistant-objects-with-css 我尝试更改边距，但对齐出错了。页脚上的负上边距是因为我想“提升”图像行后面的页脚图像（水彩飞溅），这就是它的设计方式。如果我删除 -margin 它会在图像下方。非常感谢我如何解决这个问题/我仍然做错了什么的任何想法！谢谢你。
@noobug：啊，我明白了，这对负边距很有意义。我再看看。
@noobug：你还有原始版本吗？您的网站似乎缺少样式表。

【解决方案2】：

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

.clear 包含 CSS：clear: both;

【讨论】：

将它向下移动一点，但没有修复它。我假设他说的是 IE7，它已经坏了。
感谢@SiteSafeNL 的建议，但正如@thirtydot 指出的那样，它只会将其向下移动，但不能解决问题。是的，我正在使用 IE7 进行测试。

【解决方案3】：

您可以在 IE 中使用条件语句，这是一个示例：

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

这被放置在<head> 并假设您有一个带有 IE 更正的额外 css 文件。

附：您需要将您的 IE 特定 CSS 规则添加到 IE CSS 文件中，这样它就可以在 IE 和大多数浏览器中运行...

在我的示例中，我使用了“if IE 7”，表示如果是 IE 版本 7，但您可以使用组合和其他版本。

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

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

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

编辑 2：好的，这里的问题出在几个地方...... 您将图像浮动到右侧，好的我建议在标题 + 文本 + 标题周围加上一个左浮动的 div。然后用一个额外的 div 包围图像的 div 和新的 div。这个有一个高度：自动和溢出：隐藏。然后去掉images主div的浮动，去掉上边距；最后，最好将橙色矩形添加为图像块之后的元素（这样可以保证社交 div 出现在正确的位置）。

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

[新的周围 div] [主图像 div] 图片 [/主图像 div]

[周围的 div] 标题文本标题 [/周围的div] [/新周边div]

[图像 div] 图片 [/图像 div]

[分隔符 div]（可选） [/分隔符 div]

[社交分区] [/社会 div]

【讨论】：

没错，但他应该在放入这个样式表吗？
非常感谢@jackJoe。我理解您关于附加另一个样式表并为 IE7 设置条件的意思，但我不明白如何处理 CSS 以便将图像行和社交媒体链接行放在正确的位置。我尝试更改所有边距、填充等，但我无法在 IE7 中实现与在其他浏览器中相同的布局。我还尝试在主文本和图像周围添加额外的 div，并应用“环绕”类，以及上面的 CSS 规则，这导致图像行完全消失，社交媒体链接向上移动。
别管 IE7 特定的，只需用 div 围绕这些元素并将其样式设置为自动高度和隐藏溢出，这样它将“强制”块将其余部分推到正确的位置。此外，也许最好为该新 div 指定一个高度（或至少是最大高度），这样可以保证基本元素始终就位。
P.S.只需重新阅读您的评论，您确定您包围了正确的元素吗？只要您在顶部 div 上有一个特定的高度，下面的就会正确放置。
感谢@jackJoe，我非常感谢您的建议，并且我尝试过围绕元素（从
之前到“rotxt”之后），并尝试了其他组合，但是它正在向下推动下面的内容，而不是移动图像行，或者（当试图将不同的元素包装在里面时）它隐藏了整个图像行并且仍然向上推社交媒体链接。所以不确定我应该围绕哪些元素，但我已经尝试了我能想到的每一个合乎逻辑的地方，不幸的是没有得到任何结果......谢谢你的帮助。