Question

出于某种原因，IE8计算CSS元素的18px偏移量。

当我添加top: -18px和left: -8px时，它修复了IE8中的问题，但在其他所有浏览器中都将其打破。

我尝试添加\9和\0/之类的黑客，但这些黑客在IE9中无效。

在\9和top属性之后添加left修复IE8。

但是，IE9似乎无法识别黑客并使用负top和left值以及布局中断。

我需要一种方法来解决这个问题，但它只需要我能在CSS中完成。

这只是一个小菜单，在一个更大的Java项目中使用，我无法访问其余的代码。只对CSS。

以下是获取偏移量的CSS类：

#myMenuBar{
        position: relative;
        width:800px;
        height:auto !important;
        height:36px;
        margin:0 auto;
        z-index:3001;
        text-align:left;
        top: 0px;  
        left: 0px;

    }

就像我说的那样，将顶部和左侧分别更改为-18px和-8px分别修复了ie8中的问题，但在其他地方打破了它，因为ie8是唯一计算此偏移量的浏览器。

Answer 1

您可以使用IE条件注释，使其仅适用于IE8 http://www.quirksmode.org/css/condcom.html

<style type="text/css">
#myMenuBar{
    position: relative;
    width:800px;
    height:auto !important;
    height:36px;
    margin:0 auto;
    z-index:3001;
    text-align:left;
    top: 0px;  
    left: 0px;
}
</style>


<!--[if IE 8]>     
<style type="text/css">
/* These will override the values above in IE 8 only */
#myMenuBar {
    top: -18px;  
    left: -8px;
}
</style>
<![endif]-->

如果你无法修改HTML，你可以使用CSS黑客攻击IE8及以下http://www.gravitationalfx.com/css-hacks-for-ie-targeting-only-ie8-ie7-and-ie6/只是不要告诉任何人我建议你使用它;）

#myMenuBar{
    position: relative;
    width:800px;
    height:auto !important;
    height:36px;
    margin:0 auto;
    z-index:3001;
    text-align:left;
    top: 0;  
    left: 0;
    /* That crap at the end makes it work in < IE8 only */
    top: -18px\9;
    left: -18px\9;
}

Answer 2

我找到了办法

#myMenuBar{
    position: relative;
    width:800px;
    height:auto !important;
    height:36px;
    margin:0 auto;
    z-index:3001;
    text-align:left;
    top: -18px;
    left: -8px;
}

:root #myMenuBar { top: 0px; \0/IE9; left: 0px; \0/IE9;}  /* IE9 + IE10pp4 */

这似乎在ie8,9 firefox，safari和chrome中正常工作。

Ie8计算偏移和黑客修复中断ie9

2 个答案: