IE9：アンカータグのサイジングとliホバーの問題

Question

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

1. トップレベルのアンカータグは、含まれていません。コード内に と表示されるので、私は display：block、height：100％とwidth：100％を使用しています。
2. トップレベル項目のホバーは、下位​​項目の を持ち出しません。ホバーはフォントと背景を変更しますが、 です。

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

CSSファイル：ドロップダウン・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; 

} 

ジャバスクリプトファイル：ドロップダウン・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つのファイルを同じディレクトリに置くと、私が見ているものを再現できるはずです。ご協力ありがとうございました。

Prajesh

Answer 1

トリックをしたAdding gradient to element breaks CSS functionality in IEこの記事では非常に最後の行！以下は、今後同様の問題に直面するかもしれない人々のためのいくつかの注目すべき観察です。 （勾配がLiは 勾配を取得リーに適用されている場合を意味しますが、そのすべてのサブ項目が隠さなる -

1. もちろん、IEフィルター勾配は、UL またはLiで非常にうまくいきませんまたはトップレベルのLi上に が表示されない場合）。
2. ただし、フィルターが にliの内部要素（たとえばli内のdiv）に適用されている場合は、 の場合はグラジェントとドロップダウンの両方の処理が行われます。
3. 私の場合、トップレベルのLiがホバリング時に高さを増やしたいと思っていましたが、トップレベルのLiが終わるところでsub-ul トップスタートをトップにします。フィルタは最初に ではなかったので、liは背景なしでいっぱいになりませんでした。 したがって、トップレベルliとサブulの間にはギャップがありました。フィルタが機能しなかった場合のために、 はデフォルトのフラット のバックグラウンドを持つベストプラクティスに従っているはずです。 でフィルタをコメントアウトしたとき、ドロップダウンが正常に機能しました（最上位レベルliとサブulの間に不連続性がありません ）。
4. 私が最初に従った提案は、Drop down menu doesn't work in IE9が満足できなかったことが判明しました。フィルタの前にmsや-msなどのものを追加すると、基本的にフィルタ行だけがコメントアウトされます。

Answer 2

<head>タグこの

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