IE6：高度“1em 减去 1px”答案

【问题标题】：IE6: Height "1em minus 1px"IE6：高度“1em 减去 1px”
【发布时间】：2010-05-03 01:54:12
【问题描述】：

我需要一个高度正好为 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 模式。

【问题讨论】：

直到 IE6 和无怪癖模式组合为止，我一直在使用。我的同情，并保持你的下巴。微软今年夏天将完全放弃对 IE6 的支持。 :)
@Robusto：我希望他们能让它自行卸载 ;-)
@chris_I：卸载自己并将自己踢到路边。 =)
亚马逊和谷歌也与许多其他公司一起放弃了它。 idroppedie6.com
@Rob：我已经计划在我可以放下它的那一天举行一个盛大的派对......在那之前，我迫切需要一个解决方案（即使它只是一个像素:)

标签： css internet-explorer-6 height

【解决方案1】：

target div 是否必须在物理上小 1px 或仅显示小 1px？

最简单的方法是添加“仅限 ie6”样式表：

.helper {overflow:hidden;}
.target {top:auto;}

这会将target 显示为 1em - 1px，但其实际高度为 1em，顶部 1px 被隐藏。

IE6 在绝对定位支持方面存在问题。

替代上述代码的另一种解决方案是添加“仅限 ie6”样式表：

.target {position:static;margin:-1px 0 1px 0;}

我看到你得到了绝对定位的解决方案。太好了！

【讨论】：

谢谢艾米丽。非常有趣，这可能会朝着一个好的方向发展！但是，我刚刚尝试过，div 不只是小一个像素，而是多个像素（我会说 3 或 4）。有什么想法吗？
@Emily: 好的，我发现这是由于另一个 IE6 问题，我用作测量高度的标尺的附加 div [IE6 不喜欢空 div，所以它给了它几个额外高度的像素，这当然很有意义...] 这意味着：您的解决方案是正确的，它有效:-) 它需要添加一些解决方法，但我想我可以做到这一点。
Chris - 如果绝对位置一直给你带来麻烦，我添加了一个静态位置解决方案。
非常好，您的第二个解决方案也有效！（它只需要一个额外的line-height: 1em;）现在我被宠坏了:-)

【解决方案2】：

是客户要求的吗？如果不是，那么就放弃 IE6 并为这个蹩脚/旧浏览器破解。

【讨论】：