css - 在 Internet Explorer 中对齐

Question

我有一个简单的问题:为什么元素在 IE 中不像在 Chrome 中那样对齐(参见链接)，我该如何防止这种情况？

Project site

Answer 1

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

float:right;

您可以将整个 .start-images 类 float 到左侧或右侧(这无关紧要，因为无论如何宽度都是 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; */
}

注意:我已经添加/修改了现有样式 block 中的样式

这是行得通的，因为绝对定位的元素从正常的文本流中移除(就像 float 一样)，因此即使 Internet Explorer 也不会尝试让图像与文本匹配。

.site-bg 的边距是因为绝对定位的元素也不占用任何空间，因为它们已从文本流中移除，所以你必须通过在下一个元素上放置边距来补偿这一点，这样不再填充的空间现在确实被填充了。然后也不再需要填充，因为该空间已经被边距占用很好。