2

出于某种原因，IE8 会计算18pxCSS 元素上的偏移量。

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

我尝试添加类似\9and的 hack，\0/但这些在 IE9 中不起作用。

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

但是，IE9 似乎没有识别 hack 并使用负值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;

    }

就像我说的，将 top 和 left 分别更改为 -18px 和 -8px 可以解决 ie8 中的问题，但会在其他任何地方破坏它，因为 ie8 是唯一计算此偏移量的浏览器。

4

2 回答 2

0

我找到了一种方法

#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 中正常工作。

于 2012-10-25T14:26:51.990 回答
0

您可以使用 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 hacks 瞄准 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;
}
于 2012-10-24T17:59:32.020 回答