-1

我真的在为（所有版本的）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 中。

在此处输入图像描述

在此处输入图像描述

页面缩小

4

1 回答 1

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

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

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

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

于 2013-09-13T09:57:10.617 回答