Question

我需要一个高度恰好为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>

“target”div具有所需的高度。问题是，这在IE6中不起作用，因为它在设置bottom时忽略top属性（一个众所周知的问题）。

是否有针对IE6的解决方法（可能有多个嵌套div，带边框/填充/边距/等等），还是JavaScript是唯一的解决方案？

请注意，我不能使用Quirks模式。

Answer 1

target div的物理尺寸是否要小1px或只显示1px更小？

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

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

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

IE6在绝对定位支持方面很不稳定。

另一个解决方案，而不是上面的代码，将添加“ie6 only”样式表：

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

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

Answer 2

客户是否需要？如果没有，那么就放弃IE6并破解这个糟糕/旧的浏览器。

IE6：高度“1em减1px”

2 个答案: