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

Question

一直在浏览问题并谷歌搜索，但我似乎找不到解决此问题的方法。除了 IE7 之外，对于其他任何地方的 Grid 来说，布局看起来都非常完美（令人惊讶）。

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

这些框应该都在里面彼此相差 5 个像素，但在 IE7 中，div 下面的间距完全被搞乱了。我进行了一些修复，试图最大限度地减少浏览器之间的显示差异，但这一个完全让我困惑。

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

Answer 1

删除 css 代码中的 clear:both ：

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

然后它将在所有浏览器上运行。

Answer 2

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

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

if(浏览器版本 == 7 || 浏览器版本 == 8){
document.getElementById("your_div").style.padding = 根据需要填充。
}
别的{
document.getElementById("your_div").style.padding = 默认填充。
我认为

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

Answer 3

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

1）在.gridRow内部删除clear：both然后您应该考虑添加overflow属性并将所有边距和填充放入.gridRow内.gridBox 的。这是更好的做法，因为当布局更改时您只需要更改一个类。

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

Answer 4

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

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