IE 中的布局问题 - 可能与负边距有关

Question

我真的在为（所有版本的）IE 中的布局问题而苦苦挣扎。我正在开发的网站在 Chrome 和 Firefox 中运行良好，但横幅的布局在 IE 中完全错误，它看起来比应有的低几百像素。我不确定这是否是负边距问题或什么问题，并且由于我使用的是 Mac 并且只有静态屏幕截图可供使用，因此我无法进行太多测试。

非常感谢您对此的任何反馈。我附上了一张 IE 屏幕截图的图像，以及它应该是什么样子。本站链接为：http://www.osullivans-pubs.com/draft

编辑：我不确定要包含哪些代码，因为我无法确定问题，但我猜它与这个元素有关：

#back {
overflow: hidden;
min-height: 700px;
margin-top: -235px;
padding-top: 80px;
background-position: center -44px;
text-align: center;
position: relative;
}

编辑：我附上了一张缩小的网站图片，以说明为什么需要负边距。这很难解释，但这与对角线背景以及我需要这些背景达到大约 1600 像素的事实有关（对于更大的屏幕，我不能重复它们，它们是对角线的）。我希望有一些方法可以让 IE 识别负边距，我尝试了 zoom: 1, position: relative 技术，但仍然没有。即使在 IE10 中。

Answer 1

使用负边距对于初级开发来说是个坏主意，只能在没有其他解决方案时使用。

就我个人而言，我认为负利润率是一种黑客行为。

相对位置将使元素相对于其父元素做出响应，但如果您将元素移到其父元素之外且边距为负值，您只能期待奇怪的结果。

根据我的经验，IE 会尝试第二次猜测您想要什么，而 Mozilla 则更具所见即所得。所以跨浏览器的兼容性永远是你的障碍。

如果您希望您的元素始终出现在同一个位置 [相对于像素位置 0,0（左上角）]，则在元素上使用绝对定位并指定顶部和左侧。这样你就可以忽略父元素了。

#back {
overflow: hidden;
min-height: 700px;
background-position: center -44px;
text-align: center;
position:absolute; top:30px; left:20px; margin:0px; padding:0px;
background-color:red;
}

当您希望事物根据浏览器大小调整自己重新定位时，这会变得很棘手；所以一定要测试不同情况下的绝对定位，全屏、调整大小、最小分辨率、宽屏、屏幕旋转（如果使用手持设备）。

完全关闭 padding 和 margin，同时使用 margin:0px 定位；填充：0px； 并将背景颜色更改为帮助您查看元素边缘的颜色。 因此，为什么我在上面的示例中添加了一个 reg BG。

一旦元素大致位于正确的位置（+/- 1 像素），您就可以调整边距和填充。