html - IE9：アンカータグのサイズ設定とliホバーに関する問題

Question

私はナビゲーションバーを作成しようとしています-通常のものを使用しています。FirefoxとChromeでは期待どおりに機能しますが、IE9では機能しません。どうやら2つの問題があります：

トップレベルのアンカータグは、含まれているliを埋めません。コードに表示されているように、display：block、height：100％、width：100％を使用しました。
トップレベルのアイテムにカーソルを合わせると、下位レベルのアイテムは表示されません。ただし、ホバーするとフォントと背景が変わります。

これらの2つのトピックに関する多数の記事とフォーラム投稿があります。説明したソリューションを理解し、すでに実装していることを願っています。しかし、おそらく私は何か単純なものが欠けています。

cssファイル：dropdown-menu.css

#navigation-ul {

padding: 0;

margin: 0;

list-style: none;

height: 35px; /* this height must match the #navigation-ul li.top height */ 

position: relative;

z-index: 200;

font-family: Arial,Helvetica,sans-serif;

}



#navigation-ul li.top {

display: block;

float: left;

height: 35px;

width: 150px;



/* This was the original size

height: 30px;

width: 100px;

*/



background-color: #E1E1E3;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF",

    endColorstr="#C4C4C4" ); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF),

    to(#C4C4C4) ); /* for webkit browsers */

background: -moz-linear-gradient(top, #FFFFFF, #C4C4C4);

/* for firefox 3.6+ */

border-right: 4px groove #D1D1D1;

}



#navigation-ul li a.top_link {

display: block;

float: left;

height: 100%;

width: 100%; 

line-height : 33px;

color: #003570;

text-decoration: none;

font-size: 14px;

font-weight: bold;

padding: 0;

cursor: pointer;

text-align: center;

line-height: 33px;

}



#navigation-ul li a.top_link span {

color: #003570;

font-size: 14px;

float: left;

display: block;

padding: 0;

height: 100%;

width: 100%;

}



#navigation-ul li a.top_link span.down {

color: #003570;

font-size: 14px;

float: left;

display: block;

padding: 0;

height: 100%;

width: 100%;

}



#navigation-ul li:hover a.top_link {

height: 100%;

color: #FF0000;

text-decoration: underline;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",

    endColorstr="#FFFFFF" ); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),

    to(#FFFFFF) ); /* for webkit browsers */

background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);

/* for firefox 3.6+ */

}



#navigation-ul li:hover a.top_link span {

height: 150%;

color: #FF0000;

text-decoration: underline;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",

    endColorstr="#FFFFFF" ); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),

    to(#FFFFFF) ); /* for webkit browsers */

background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);

/* for firefox 3.6+ */

}



#navigation-ul li:hover a.top_link span.down {

height: 150%;

color: #FF0000;

text-decoration: underline;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",

    endColorstr="#FFFFFF" ); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),

    to(#FFFFFF) ); /* for webkit browsers */

background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);

/* for firefox 3.6+ */

}











/* Default list styling */

#navigation-ul li:hover {

position: relative;

z-index: 200;

}



#navigation-ul li:hover ul.sub {

left: 0px;

top: 50px; /* (top level li height is YYpx) + (xx% of that (= 0.xx*YY px) height increase on hover) */

padding: 0;

white-space: nowrap;

width: 200px;

height: auto;

z-index: 300;

}



#navigation-ul li:hover ul.sub li {

display: block;

height: 30px;

border-bottom: 1px solid #FF0000;



background-color: #E1E1E3; 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",

    endColorstr="#FFFFFF" ); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),

    to(#FFFFFF) ); /* for webkit browsers */

background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);



position: relative;

float: left;

width: 200px;

font-weight: normal;

}



#navigation-ul li:hover ul.sub li a {

display: block;

font-size: 12px;

height: 100%;

width: 100%;

line-height: 18px;

text-indent: 5px;

color: #003570;

text-decoration: none;

}



#navigation-ul li ul.sub li a.fly {

/* background: #bbd37e url(arrow.gif) 80px 6px no-repeat; */



}



#navigation-ul li:hover ul.sub li a:hover {

color: #FF0000;

font-weight: bold;

text-decoration: underline;

}



/* Hover effect over the 2nd level li*/

#navigation-ul li:hover ul.sub li a.fly:hover {

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF",

    endColorstr="#C4C4C4" ); /* for IE */

background: -webkit-gradient(linear, left top, right top, from(#FFFFFF),

    to(#C4C4C4) ); /* for webkit browsers */

background: -moz-linear-gradient(left, #FFFFFF, #C4C4C4);



color: #FF000;

font-weight: bold;

width: 105%;

border-bottom: 1px solid #FF0000;

text-decoration: underline;

}



#navigation-ul li:hover li:hover ul,#navigation-ul li:hover li:hover li:hover ul,#navigation-ul li:hover li:hover li:hover li:hover ul,#navigation-ul li:hover li:hover li:hover li:hover li:hover ul

{

left: 210px; /* (higher level li width is 200px) + 5% (=10px) increase during hover */

top: 0px;

background: #C4C4C4;

padding: 0px;

margin-bottom: 1px;

white-space: nowrap;

/* width: 150px; */

z-index: 400;

height: auto;

}



#navigation-ul ul,#navigation-ul li:hover ul ul,#navigation-ul li:hover li:hover ul ul,#navigation-ul li:hover li:hover li:hover ul ul,#navigation-ul li:hover li:hover li:hover li:hover ul ul

{

position: absolute;

left: -9999px;

top: -9999px;

width: 0;

height: 0;

margin: 0;

padding: 0;

list-style: none;

}



/* Hover effect over the 2nd level li - going from 2nd level to 3rd level*/

#navigation-ul li:hover li:hover a.fly,#navigation-ul li:hover li:hover li:hover a.fly,#navigation-ul li:hover li:hover li:hover li:hover a.fly,#navigation-ul li:hover li:hover li:hover li:hover li:hover a.fly

{

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF",

    endColorstr="#C4C4C4" ); /* for IE */

background: -webkit-gradient(linear, left top, right top, from(#FFFFFF),

    to(#C4C4C4) ); /* for webkit browsers */

background: -moz-linear-gradient(left, #FFFFFF, #C4C4C4);



color: #FF000;

font-weight: bold;

width: 105%;

border-bottom: 1px solid #FF0000;

text-decoration: underline;

}



#navigation-ul li:hover li:hover li a.fly,#navigation-ul li:hover li:hover li:hover li a.fly,#navigation-ul li:hover li:hover li:hover li:hover li a.fly

{

background: #bbd37e url(arrow.gif) 80px 6px no-repeat;

color: #000;

border-color: #bbd37e;

}

javascriptファイル：dropdown-menu.js

SampleHover = function() {



var cssRule;



var newSelector;



for (var i = 0; i < document.styleSheets.length; i++) {



    for (var j = 0; j < document.styleSheets[i].rules.length ; j++) {



        cssRule = document.styleSheets[i].rules[j];



        if (cssRule.selectorText.indexOf("li:hover") != -1) {



            newSelector = cssRule.selectorText.replace(/li:hover/gi, "li.hover");

            document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);

        }

    }

}



var liElements = document.getElementById("navigation-ul").getElementsByTagName("li");



for ( var i = 0; i < liElements.length; i++ ) {



    liElements[i].onmouseover = function() {



        this.className = this.className + " hover";

    };



    liElements[i].onmouseout = function() {



        this.className = this.className.replace(new RegExp(" hover\\b"), "");

    };

}

};



if (window.attachEvent) {



window.attachEvent("onload", SampleHover); 

}

htmlファイル：sample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title>Sample</title>
<meta name="description" content=""></meta>
<meta name="keywords" content=""></meta>
<meta name="robots" content="index, follow"></meta>



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

<link rel="stylesheet" href="sample.css"
    type="text/css" title="Sample Style" media="screen, print"></link>
<link rel="stylesheet" href="dropdown-menu.css"
    type="text/css" />

<script type="text/javascript" src="dropdown-menu.js"></script>

</head>




<body style="align: CENTER;">

<div id=main style="width: 960px; margin: 0 auto;">

    <div id=header>

<div id="navigation-div" style="padding-bottom: 5px; margin-bottom: 5px;">

<!--  <span class="preload1"></span> <span class="preload2"></span> -->

<ul id="navigation-ul"
    style="display:inline-block; border: 1px solid #D1D1D1; margin-left: 0px; border-radius: 5px;">
    <li class="top" style="border-radius: 5px 0 0 5px;"><a
        class="top_link" href="/index">Home</a></li>


    <li class="top"><a id="Solutions" class="top_link down"
        href="/solutions"><span class="down">Solutions</span></a>
        <ul class="sub">

            <li><a class="fly" href="/solutions/business">Business
                    Solutions</a>
                <ul>
                    <li><a href="/solutions/business/investment-decision">Investment
                            Decisions</a></li>
                    <li><a href="/solutions/business/product-mgmt">Product
                            Management</a></li>
                </ul></li>
            <li><a class="fly" href="/solutions/software">Software
                    Solutions</a></li>

            <li><a class="fly" href="/solutions/engineering">Engineering
                    Solutions</a></li>
        </ul></li>


    <li class="top" ><a
        id="Industries" class="top_link" href="/industries"><span
            class="down">Industries</span></a></li>

    <li class="top" ><a
        id="KnowledgeBase" class="top_link" href="/knowledgebase"><span
            class="down">KnowledgeBase</span></a></li>

    <li class="top" style="border: none; width: 342px; border-radius: 0 5px 5px 0;"></li>

</ul>

</div>
</div>
</body>
</html>

3つのファイルを同じディレクトリに保存すると、私が見ているものを再現できるはずです。ご協力ありがとうございました。

プラジェッシュ

score 0 · Accepted Answer

この投稿の最後の行要素にグラデーションを追加すると、IEのCSS機能が壊れます。以下は、将来同様の問題に直面する可能性のある人々のためのいくつかの注目すべき観察です。

もちろん、IEフィルターのグラデーションはulやliとうまく合いません。つまり、グラデーションがliに適用されると、liはグラデーションを取得しますが、そのすべてのサブアイテムは非表示になります（または、トップレベルli）。
ただし、フィルターがliの内部の要素（たとえば、liの内部のdiv）に適用される場合、グラデーションとドロップダウンの両方が機能します。
私の場合、トップレベルのliをホバー時に高さを上げて、トップliが終了する場所の下からサブULトップを開始するようにしました。フィルタが最初は機能していなかったため、liは背景で埋められず、トップレベルのliとサブulの間にギャップがありました。フィルタが機能しなかった場合に備えて、デフォルトのフラットな背景を使用するというベストプラクティスに従う必要がありました。フィルタをコメントアウトしてそれを行ったとき、ドロップダウンは正常に機能しました（トップレベルのliとサブulの間に不連続性はありません）。
私が最初に従った提案で、ドロップダウンメニューがIE9で機能しないことに満足していたので、解決策がないことが判明しました。フィルターの前にms-または-msなどを追加すると、基本的にフィルター行がコメント化されます。

score 0 · Accepted Answer

<head>タグの下にこのコード行を追加します

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

このような

<html>
   <head>
       <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <!-- Your codes / styles / scripts -->
       </head>
       <body>
         <!-- your codes-->
       </body>
</html>

html - IE9：アンカータグのサイズ設定とliホバーに関する問題

2 に答える 2

Related

Reference