0

問題ページのライブ ビューについては、http: //rcnhca.org.uk/sites/first_steps/health-safety-and-security/にアクセスしてください。

問題 1: そのリンクに移動してドロップダウン ナビゲーションをロールオーバーすると、それが子であることがわかりliますmouseenter。ただし、IE8で初めてロールオーバーすると、li指定したにもかかわらず、途中からアニメーション化されbackground-position: -25px 50%;ます.jqueryが同じ設定をインラインで適用すると、期待どおりに動作し始めます。

問題 2: 下の画像でわかるように、IE8 (これは IE7 で正しく動作します)がパディングを正しくレンダリングしていません。core.css* {margin: 0; padding: 0;}で使用するすべてのマージンとパディングをリセットしました:

パディングエラー

このナビゲーション バーの HTML マークアップは次のとおりです。

<header class="one">
    <nav class="container_16 clearfix" id="breadcrumbs">
        <a href="http://rcnhca.org.uk/sites/first_steps" id="home"></a>
        <ul id="parent">
            <li>
                <a href="http://rcnhca.org.uk/sites/first_steps/communication/">Communication</a>
                <ul class="child">
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/getting-started/">Getting started</a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/">Health, Safety and Security</a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/quality/">Quality</a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/">Equality, diversity and rights </a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/">Clinical skills</a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/additional-material/">Additional material</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Select a topic</a>
                <ul class="child">
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/communication/why-communication-is-important/">Why communication is important</a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/communication/communication-methods/">Communication methods</a></li>
                    <li><a href="http://rcnhca.org.uk/sites/first_steps/communication/written-communication/">Barriers to communication</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

および起動する CSS:

header {
    width: 100%;
}

header.one {
    height: 50px;
    background: #44a9c4;
}

header.two {
    height: 45px;
    background: #3393b5;
}


/* =============================================================================
   Breadcrumb navigation
   ========================================================================== */

#breadcrumbs {
    padding: 0 3px 3px 0;
    background: #ffffff;
    border: 0px solid;
    border-left: #3a90a7 2px solid;
    border-right: #3a90a7 2px solid;
    border-bottom: #3a90a7 2px solid;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#breadcrumbs #home{
    display: block;
    height: 39px;
    width: 55px;
    float: left;
    background-image: url(library/images/home_icon.png);
    background-repeat: no-repeat;
    background-position: center;    
    text-indent: -999em;
}

#breadcrumbs ul#parent {
    height: 39px;
    width: 905px;
    float: right;
    position: relative;
    background: #f38630;
    border: 0px solid;
    -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
    -moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
    box-shadow: inset 0px -2px 0px 0px #cf7229;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#breadcrumbs ul#parent li {
    position: relative;
    height: 39px;
    float: left;
    min-width: 1px; /* required to fix Opera bug */
    padding: 0 47px 0 15px;
    background-image: url(library/images/breadcrumb_seperator.png);
    background-repeat: no-repeat;
    background-position: right;
    line-height: 39px;
}

#breadcrumbs ul#parent li a {
    display: block;
    height: 42px;
    font-size: 0.938em;
    font-weight:900;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0px 2px 0px #cf7229;
}

#breadcrumbs ul li a:visited {
    color: #ffffff;
}
#breadcrumbs ul#parent li:first-child ul {
    left: -5px;
}
#breadcrumbs ul#parent li ul {
    position: absolute;
    z-index: 1;
    left: -28px;
    top: 42px;
    background: #ffffff;
    border-left: #3a90a7 2px solid;
    border-right: #3a90a7 2px solid;
    border-bottom: #3a90a7 2px solid;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.js #breadcrumbs ul#parent li ul {
    display:none;
}

.no-js #breadcrumbs ul#parent li ul {
    left: -999em;
}

#breadcrumbs ul#parent li ul li {
    float: none;
    height: 26px;
    margin: 0 3px 3px 3px;
    padding: 0 15px;
    background-image: url(library/images/star-icon.png);
    background-position: -25px center;
    background-repeat: no-repeat;
    background-color: #738793;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    line-height: 26px;
    white-space: nowrap;
}

#breadcrumbs ul#parent li ul li a{
    color: #ffffff;
    text-decoration: none;
    text-shadow: none;
    letter-spacing: 0.01em;
    font-weight: 100;
}

#breadcrumbs ul#parent li ul li:hover{
    background-color: #3393b5;
}

.no-js #breadcrumbs ul#parent li ul li:hover{
    background-position: 6px center;
    text-indent: 10px;
}

#breadcrumbs ul#parent li:hover ul {
    z-index: 2;
}

.no-js #breadcrumbs ul#parent li:hover ul {
    left: -5px;
}

私はこの問題をデバッグしようとして何年も費やしてきましたが、なぜこれが起こっているのか分かりません。(注: HTML5SHIVを使用して、レガシー ブラウザーで HTML5 要素をレンダリングしています)

4

2 に答える 2

0

バグが何であるか、またはIE8がそのように動作している理由についての答えはありませんが、フロートを削除し、それらを相対的に絶対に配置し、次のように明示的な高さを与えることで、マージンの問題を克服することができ#homeましul#parentた#breadcrumbs:

#breadcrumbs {
    height: 39px;
    padding: 0 3px 3px 0;
    background: #ffffff;
    position: relative;
    border: 0px solid;
    border-left: #3a90a7 2px solid;
    border-right: #3a90a7 2px solid;
    border-bottom: #3a90a7 2px solid;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#breadcrumbs #home{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 39px;
    width: 55px;
    float: left;
    background-image: url(library/images/home_icon.png);
    background-repeat: no-repeat;
    background-position: center;    
    text-indent: -999em;
}

#breadcrumbs ul#parent {
    height: 39px;
    width: 885px;
    position: absolute;
    right: 3px;
    top: 0px;
    background: #f38630;
    margin: 0px;
    -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
    -moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
    box-shadow: inset 0px -2px 0px 0px #cf7229;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

背景画像の問題については、jquery 関数を作成して、要素が読み込まれた後に背景位置を要素にインラインで追加しました。

于 2012-04-17T10:07:58.773 に答える
0

使用HTML5Shivすると、IE 7-8 で多くの問題が発生します。html5 タグがposition:static(ブラウザのデフォルト) の場合、javascript を使用して内部で何かをアニメーション化/移動すると、IE がそれらの要素の再描画に失敗することがあるようです。ほとんどの場合、これらのタグに を付けることができれば、相対的に配置された要素で IE が正しくposition:relativeトリガーされるように見えるため、問題は解消されます。hasLayout

于 2012-05-24T19:19:32.650 に答える