すなわち、7はCSSインラインブロックまたは修正で動作しません

css html internet-explorer-7
すなわち、7はCSSインラインブロックまたは修正で動作しません

私はこれが何百万回も前に尋ねられたことを知っていますが、私が試みたものは何も問題を解決していません。 私は見栄えの良い “タイプの事に取り組んでいます。 私は一般的なCSSドロップダウンナビゲーションメニューに基づいています(ネストされた「

sと “

s、わずかな調整が必要です。 微調整の1つは、インラインで表示する必要があることです(フローティングせずに、同じ行の他の要素を通過するため、他のすべてをフロートさせたくないため)。 つまり、7以外のブラウザー(およびおそらくそれより低いもの)で正常に動作しますが、IE7より低いものは必要ありません。 コードは次のとおりです。http://jsfiddle.net/ralokz/hjDVS/2/

IE7以外のブラウザでそれを見ると、私がそれをしたいように見えます:

image:https://i.stack.imgur.com/4xhjK.jpg [良いメニュー]

しかし、IE7で見ると、次のようになります。

image:https://i.stack.imgur.com/B6xqP.jpg [悪いメニュー]

インラインブロックの修正でよく登場するサイトの1つは、http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/です。 それはie8で機能しましたが、残念ながらie7はまだ正しく見えません。

ie7のインラインブロックを修正する他の方法はありますか? または、2番目のレベルを確認するCSSの代替手段があります “

sは常に最初のレベルに垂直に配置されます ”

?ありがとう!

  6  0


ベストアンサー

IE6とIE7は inline-block`をサポートしていますが、大きなバグがあります。デフォルトの表示スタイルが inline`の要素でのみサポートしています。

したがって、 `span {display:inline-block;}`は機能しますが、 `div {display:inline-block;}`は機能しません。

これがあなたにとって問題である場合、良いニュースがあります:彼らには別のバグがあります。 `。

これを行う場合は、IE6とIE7のみがこれを行うように注意する必要があります。他のブラウザーでは適切な「インラインブロック」スタイルが必要になるためです。 これを実現するには、ブラウザ固有のハッキングや条件付きコメントが必要になる場合があります。

3


追加:「div:dropdown ul li」に「position:relative;」を追加し、「div.dropdown ul li ul」のマージンを取り除き、「top:25px」、「left:-1px;」、「width」を設定します:100% `;最後に、「div.dropdown ul li ul li」を「margin:0;」に設定し、左右のパディングを削除して、「width:100%」を設定します…​

私は何かを見逃しているかもしれませんが、ここに実際の例があります:http://jsfiddle.net/hjDVS/7/

あなたの本当の問題は、絶対位置づけられた「ul」だったと思います

3


display:inline-block`のあるルールごとに、IE 7スタイルシートに zoom:1;を入れます。 display:inline; `これはすべての要素で機能し、ほぼ同じ方法で機能します。

2


タイトルとURLをコピーしました