2

For some reason IE8 calculates an offset of 18px on a CSS element.

When I add a top: -18px and left: -8px it fixes the issue in IE8 but breaks it in every other browser.

I tried adding hacks like the \9 and \0/ but those do not work in IE9.

Adding the \9 after the top and left attributes fix IE8.

However, IE9 does not seem to recognize the hack and uses the negative top and left values and the layout breaks.

I need a way to fix this but it needs to be something I can do in the CSS only.

This is just a small menu which is used all over the place in a much larger Java project and I do not have access to the rest of the code. Only to the CSS.

Here is the CSS class that is getting the offset:

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

    }

Like I said, changing the top and left to -18px and -8px respectively fixes the issue in ie8 but breaks it everywhere else since ie8 is the only browser which calculates this offset.

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 ハックを使用して 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 に答える