代码之家  ›  专栏  ›  技术社区  ›  Chris Lercher

IE6:高度“1em减去1px”

  •  1
  • Chris Lercher  · 技术社区  · 16 年前

    我需要一个高度为1公分减去1公分的潜水舱。这可以在大多数浏览器中实现,例如:

    <!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中不起作用,因为它忽略了 bottom top (一个众所周知的问题)。

    请注意,我不能使用怪癖模式。

    2 回复  |  直到 16 年前
        1
  •  2
  •   Emily    16 年前

    target

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

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

    这将显示 目标 作为1em-1px,但其实际高度是1em,顶部1px是隐藏的。


    IE6在绝对定位支持方面是脆弱的。

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

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

        2
  •  1
  •   dariol    16 年前

    客户是否要求?如果不是的话,那就放弃IE6,为这个蹩脚的/旧的浏览器进行黑客攻击吧。