网站布局仅在 IE 中混乱
我有一个使用 HTML 和 CSS 在 Dreamweaver 中构建的网站。
布局正是我想要的所有浏览器（Chrome、Firefox、Safari）中的布局，但 Internet Explorer 7 除外，其中底行图像或图像的布局完全混乱 - 要么太高，要么太靠右。我不知道为什么会发生这种情况，我是初学者，已经尝试了我能想到的所有方法，如果有人可以提供帮助，我将不胜感激。
该网站位于：http://www.mediadarling.co.uk/clients/lenistudios/< /a>
提前致谢！
I have a site built in Dreamweaver using HTML and CSS.
The layout is exactly how I want it in all browsers (Chrome, Firefox, Safari) except for Internet Explorer 7 where the layout of the bottom row of images or image is totally messed up - either too high or too much to the right. I have no idea why this is happening, I am a beginner and have tried all I can think of, if anyone can help that would be much appreciated.
The site is here: http://www.mediadarling.co.uk/clients/lenistudios/
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你的CSS中有一些我不太明白的地方：
为什么上边距是负数？这似乎是在 IE 7 中将图像拉得太远的原因。我真的不明白为什么它不在其他浏览器中；我猜想与所涉及的花车有关。
这与其他负顶部边距有关吗？
无论如何，我认为您可以通过以下方式解决 IE 7 中的问题：
margin-top: 10px;添加到#imagerow仅在 IE 7 中（并且可能是 IE 6）（由于某些神秘的 IE 原因，顶部填充不能与浮动一起使用）请参阅此处的示例代码：http://www.pauldwaite.co.uk/test-pages/5220698/
您的 HTML 中还存在一些验证错误。我不认为它们会导致你的问题，但我首先修复了它们，因为当你试图追踪 IE 错误时，你真的不希望其中出现验证错误。 这是页面的验证。
There’s a couple of bits in your CSS that I don’t quite understand:
Why the negative top margin? This seems to be what’s pulling the images up too far in IE 7. I don’t really understand why it’s not in other browsers; something to do with the floats involved I guess.
Is this related to the other negative top margin?
Anyhoo, I think you can fix your issue in IE 7 by:
margin-top: 10px;to#imagerowjust in IE 7 (and possibly IE 6) (the padding top doesn’t work with the floats for some mysterious IE reason)See here for example code: http://www.pauldwaite.co.uk/test-pages/5220698/
You’ve also got a couple of validation errors in your HTML. I don’t think they’re causing your issue, but I fixed them first, because when you’re trying to track down an IE bug you really don’t want validation errors in there. Here’s the validation of the page.
之后：
滚动图像以查看更大的版本地点：
gt;
.clear 包含 CSS：
clear: Both;After:
<div id="rotxt">Roll over images to see larger versions</div>Place:
<p class="clear"><br /></p>The .clear contains the CSS:
clear: both;您可以对 IE 使用条件语句，这里有一个示例：
它位于
处，并假设您有一个带有 IE 更正的额外 css 文件。PS你需要将IE特定的CSS规则添加到IE CSS文件中，这样它就可以在IE和大多数浏览器中工作...
在我的示例中，我使用了“if IE 7”，意思是如果它是IE版本7，但您可以使用组合和其他版本。
编辑：用另一个 div 包围亲爱的客人、文本、图像和 div #rotxt，并确保它实际上用一个简单的规则包围它：
.surround {height: auto;溢出：隐藏;}这是跨浏览器的，不需要条件CSS。
编辑2：
好吧，问题出在几个地方......
你将图像浮动到右侧，好吧
我建议用一个带有浮动的 div 包围标题 + 文本 + 标题。
然后用另一个 div 包围图像的 div 和新的 div。这个高度：自动和溢出：隐藏。
然后去掉图片主div的浮动，并去掉上边距；
最后，最好将橙色矩形添加为图像块后面的元素（这样可以保证社交 div 出现在正确的位置）。
所以，我的建议是这样的（抱歉不是真正的标签）：
[新的周围 div]
[主图像div]
图像
[/主图像div]
[周围div]
标题
文本
标题
[/周围的div]
[/新的周围 div]
[图像 div]
图片
[/images div]
[分隔符 div]（可选）
[/sepatator div]
[社交 div]
[/社交div]
you can use conditional statements for IE, here's an example:
This is placed at the
<head>and assumes that you have an extra css file with the IE corrections.P.S. you need to add your IE specific CSS rules into the IE CSS file, that way it will work in IE and most browsers...
In my example, I used the "if IE 7", means if it is IE version 7, but you could use combinations and other versions.
EDIT: surround the Dear guest, text, image and the div #rotxt with another div and make sure it actually surrounds it with a simple rule:
.surround {height: auto; overflow: hidden;}this is cross-browser, no need for the conditional CSS.
EDIT 2:
Ok, the problem here is in several places...
You're floating the image to the right, ok
I suggest surrounding the title + text + caption with a div with a float left.
Then surround both the image's div and the new div with an aditional div. This one with a height: auto and overflow: hidden.
Then remove the float of the images main div, and remove the top margin;
Finally, it would be best to add the orange rectangle as an element that comes after the images block (this way it's guaranteed that the social div comes in the right place).
So, my suggestion is something like this (sorry for not real tags):
[new surrounding div]
[main image div]
image
[/main image div]
[surrounding div]
title
text
caption
[/surrounding div]
[/new surrounding div]
[images div]
images
[/images div]
[sepatator div] (optional)
[/sepatator div]
[social div]
[/social div]