Question

我有一个简单的问题：为什么IE中的元素与Chrome中的元素不一致（请参阅链接）以及如何防止这种情况？

Answer 1

它似乎与页面顶部的导航菜单有关。它似乎将图像渲染为与导航项相同的“文本行”。这个问题的解决方案是从文本流中删除元素。这可以通过几种方式完成，但我会列出最简单的两种方法。

`float:right;`

您可以将整个.start-images类浮动到左侧或右侧（这无关紧要，因为无论如何宽度都是100％）。这将从文本流中删除它，这将阻止Internet Explorer尝试使其适合菜单项。那么你的风格是：

.start-images {
    position: float:right;
}

`position:absolute;`

只需将position:absolute添加到.start-images课程，然后确保以下.site-bg上的负边距替换为图像高度的正边距，然后您就可以了删除你的填充。那么你的风格是：

.start-images {
    height: 500px;
    width: 100%;
    position: absolute;
}
.site-bg {
    background: #FFF;
    min-height: 100%;
    height: auto;
    margin: 500px auto 60px; /* -301px auto -60px; */
    /* padding: 301px 0 120px; */
}

注意：我已在现有样式块中添加/修改了样式

这样可以工作，因为绝对定位的元素会从正常的文本流中移除（就像浮动一样），所以即使Internet Explorer也不会尝试使图像适合文本。

.site-bg上的边距是因为绝对定位的元素也不占用任何空间，因为它们已从文本流中删除，因此您必须通过在下一个元素上加上一个边距来补偿这一点，这样就不再填充不再填充的空间了。然后也不再需要填充，因为该空间已经被边缘很好地占用了。

在Internet Explorer中对齐

1 个答案:

`float:right;`

`position:absolute;`