css - 当我设置填充时，如何阻止 IE 7 忽略我的宽度值并将元素视为 block ？

Question

Isolated test case (在 IE 7 或 IE 8/9 中以 IE 7 模式查看)

在 IE 7 中查看此页面导致我的宽度值被忽略。如果你删除填充值，宽度会被正确应用，但是当你添加填充时，它会导致整个页面增长，并且它几乎将填充视为边距。页面宽度越大，元素右侧的空白区域就越大。我一直无法找到这是哪个错误，更重要的是，如何修复它。有没有人见过这个，有没有人知道解决方案？

到目前为止我尝试过的事情:

• 缩放修复
• display: inline-block(推荐用于双垂直填充问题)
• 不是line-height(这是宽度问题...)

问题截图:

这个 div 应该跨越页面的整个宽度，不能超过，但是你会注意到这里的滚动条: 以及向右滚动的结果: 这不应该在那里。

在浏览器工具中检查元素显示宽度不正确为页面的完整宽度，而不是完整宽度减去填充。

Answer 1

免责声明:我将忽略功能要求和您对其他答案的评论，只专注于具体问题。

---

这个 IE7 特有的问题是由使用偏移量引起的(例如 top、right、bottom 或 left ) 在相对定位的元素上。如果你偏移一个相对定位的元素，那么它基本上仍然会保留其原始位置的整个空间。请注意，当偏移绝对定位元素时不会发生这种情况。

在应用 left 偏移量之前，相对定位的元素由于其宽度和右侧填充完全超出视口(viewport)，因此将生成水平滚动条。在相对定位的元素上应用 left 偏移后，您基本上会在偏移的另一侧留下与偏移相同大小的空间，该空间仍在视口(viewport)之外。

有点理智的网络浏览器会在重绘过程​​中发现视口(viewport)外没有可见，因此再次隐藏滚动条。然而，IE7 不够智能并保留了滚动条。

毕竟，从技术上讲，使用 left 偏移量是错误的解决方案。您应该首先使用 margin-left 而不是 left。与 offset 不同的是，margin 不会在原来的位置留空，而是真正的将整个元素推到想要的位置。

那么，这是你的脚本是如何修复的:

$('#el').css({
    'width': document.body.scrollWidth - 200,
    'padding-right': 200,
    'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});

---

顺便说一下，我想知道 float: left; 在这个您显然想要模拟 100% 宽度的结构中有何意义。它可能用于具体示例中不可见的其他目的。