css - IE7 DIV 之间的额外间距/填充

Question

一直在浏览问题并在谷歌上搜索，但我似乎无法找到解决此问题的方法。除了 IE7（惊喜）之外，其他任何地方的 Grid 布局看起来都非常好。

http://lalive-branch.aeg-webdev.com/

这些框都应该在 5 像素之内，但在 IE7 中，div 下方的间距完全被弄乱了。我做了一些修复以尽量减少浏览器之间的显示差异，但这完全让我难以置信。

任何见解或帮助将不胜感激。请忽略jquery错误之类的:)，谢谢。

Answer 1

你必须使用脚本来解决这个css错误。

在您的核心中，您必须创建一个 javascript，并且此脚本您必须创建一种方法，如下所示。

if(browser_version == 7 || browser_version == 8){ document.getElementById("your_div").style.padding = 随意填充。} else{ document.getElementById("your_div").style.padding = 默认填充。}

我认为这可以帮助您解决浏览器 CSS 错误。

Answer 2

您必须在 CSS 中进行一些更改：

1）在 .gridRow 中删除clear: 两者都应该考虑添加溢出属性并将所有边距和填充放在 .gridBox 的 .gridRow 中。这是更好的做法，因为当您的布局发生更改时，您只需要更改一个类。

.gridRow {
    /*clear: both;*/
    display: block;
    margin-top: 5px;
    overflow: auto;
}

Answer 3

如果您只想要 IE7 样式，您可以将以下内容添加到您的标签中：

<!--[if IE 7]>
<style type="text/css">
.myIE7onlyClass {/*styles here*/}
</style>
<![endif]-->

Answer 4

删除：clear:both在您的 css 代码中：

.gridRow {display:block; /* Remove - clear:both; */}

然后它将适用于所有浏览器。