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;
}

编辑：我附上了缩小网站的图片，以了解为什么负边距是必要的。这很难解释，但它与对角背景和我需要这些背景达到约1600px的事实有关（对于更大的屏幕，我不能重复它们，它们是对角的）。我希望有一些方法可以让IE识别负边距，我尝试过缩放：1，位置：相对技术，但仍然没有。即使在IE10中也是如此。

Answer 1

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

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

位置相对会使元素相对于其父元素做出响应，但是如果你已经将元素移动到其父元素之外且带有负边距，那么你只能得到奇怪的结果。

根据我的经验，IE会尝试第二次猜测你想要什么，而Mozilla更喜欢wysisyg。所以跨浏览器的兼容性永远是你的一个障碍。

如果您希望元素始终出现在[相对于像素位置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;
}

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

完全关闭填充和边距，同时使用边距定位：0px;填充：0像素; 并将背景颜色更改为有助于您查看元素边缘的内容。 因此，为什么我在上面的例子中添加了一个reg BG。

一旦元素在正确的位置（+/- 1像素）变得粗糙，那么你可以调整边距和填充。