0

CSS と html5 に比較的慣れていない私は、このチュートリアルを使用して、単純な純粋な CSS/html5 ドロップダウン メニューを作成しました。IE8 では、残念ながら正しく動作しません。HTML shiv を使用し、すべての html5 要素にdisplay:blockスタイルシートのスタイルを指定しました。

ドロップダウンが機能し、IE8 のサブメニューにオンホバー カラーが表示されますが、背景色がなく、CSS でこれを指定したにもかかわらず、サブメニューが適切に配置されないか、インライン スタイルとして表示されます。

nav ul li{
          display: inline-table; <-- being ignored
          float:left;   <-- being ignored
         }

リストの背景色 (colorzilla を使用して以下のグラデーション コードを生成)

nav ul {

background: rgb(87,179,229); Old browsers - doesn't work
background: -moz-linear-gradient(top, rgba(87,179,229,1) 0%, rgba(29,81,145,1) 50%,     rgba(15,52,96,1) 51%, rgba(18,61,114,1) 74%, rgba(89,122,165,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,179,229,1)), color-stop(50%,rgba(29,81,145,1)), color-stop(51%,rgba(15,52,96,1)), color-stop(74%,rgba(18,61,114,1)), color-stop(100%,rgba(89,122,165,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* W3C */filter:     
/* To try and make it work in IE6-9 */
progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b3e5', endColorstr='#597aa5',GradientType=0 ); /* To try and make it work in IE6-9 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b3e5', endColorstr='#597aa5',GradientType=0 ); /* To try and make it work in IE6-9 */



box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table; <-- Not ignored in ie8

                }

IE8 で動作させる方法を知っている人はいますか? ie8 では子要素が nav/list 階層のスタイルを継承することを許可していないことを読みましたが、明示的にスタイルを指定すれば、とにかく動作するはずですか? ie8 がまだ nav/ul タグを正しく認識していないということですか?

すべての助けに感謝します。

4

2 に答える 2

0

この js コードをページに追加すると、ie で html5 要素が定義されます

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
于 2013-02-26T11:41:55.877 に答える
0

あなたの HTML5 shim は動作してnav ulいます。

要素に使用inline-tableしている特定の理由はありますか? s を試して、達成しようとしているのと同じ効果が得られるかどうかを確認するli価値があるかもしれません。または、フロートに変更して削除できる場合があります。display: blocklidisplay: table-cell

また、開発者ツールについては IE9 のページを参照してください。「IE8モード」に設定すると、IE8のかなり正確な概算に加えて、IEが見ているものを見ることができます（いくつかの違いを見つけましたが、IE9の開発者ツールの有用性を克服するのに十分ではありません）. 他の何かが設定をオーバーライドしている可能性があります (IE のみのスタイルシートでのより具体的な宣言など)。

ちなみに、display: inline-table(またはブロックとインライン以外のほとんどの表示プロパティ)は IE7 では機能しません。IE7 をサポートする必要がある場合に備えて、注意してください。

于 2013-02-26T16:08:32.517 に答える