IE6：高度“1em 减 1px”
我需要一个高度恰好为 1em 减去 1px 的 div。这可以在大多数浏览器中实现，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper">
<div class="target"></div>
</div>
</body>
</html>
“目标”div 具有所需的高度。问题是，这在 IE6 中不起作用，因为当设置 top 时，它会忽略 bottom 属性（众所周知的问题）。
IE6 是否有解决方法（可能有多个嵌套 div，有边框/填充/边距/其他），还是 JavaScript 是唯一的解决方案？
请注意，我无法使用 Quirks 模式。
I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper">
<div class="target"></div>
</div>
</body>
</html>
The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).
Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?
Please note, that I can't use Quirks Mode.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
targetdiv 是否必须在物理上小 1px 或者只是显示小 1px？最简单的方法是添加“仅限 ie6”样式表：
这会将
target显示为 1em - 1px，但其实际高度为 1em，顶部 1px 被隐藏。IE6 在绝对定位支持方面表现不佳。
另一个解决方案，而不是上面的代码，是添加一个“仅 ie6”样式表：
我看到你得到了可以工作的绝对定位解决方案。伟大的！
Does the
targetdiv have to be physically 1px smaller or just display 1px smaller?The easiest way would be to add in an "ie6 only" stylesheet:
This will display
targetas 1em - 1px but its real height is 1em with the top 1px is hidden.IE6 is flaky when it comes to absolute positioning support.
Another solution, instead of the code above, would be to add in an "ie6 only" stylesheet:
I see you got the absolute positioned solution to work. Great!
是客户要求的吗？如果没有，那么就放弃 IE6 并破解这个蹩脚/旧的浏览器。
Is it required by the client? If not then just abandon IE6 and hacks for this crappy/old browser.