2011-06-22 5 views
6

これまでに何百万回も尋ねられましたが、私が試したことは何も問題を解決していません。私はよく見て<select>タイプのものに取り組んでいます。私は一般的なCSSのドロップダウンナビゲーションメニューを使用しています(ネストされた<ul><li>を使って、ちょっとした調整をしています。それと同じ行の要素で、それ以外のものはすべてフロートしたくない)。私はそれが7以外のブラウザーでもうまく機能している(そしておそらくそれ以下のものもあるが、 。IE7)ここでは、コードは次のとおりです。つまり、7はCSSのインラインブロックまたは修正では機能しません

good menu

しかし、もし:あなたは任意の非IE7のブラウザでその見ればhttp://jsfiddle.net/ralokz/hjDVS/2/

、それは私がそれをしたいかのように見えますあなたはIE7でそれを見て、それは次のようになります。http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/:私はインラインブロックの修正のために多くのことを思い付く見た

bad menu

一つのサイトがこれです。それはie8のために働いたが、残念ながらie7はまだ正しく見えない。

ie7のインラインブロックを修正する他の方法はありますか?または、第2レベル<li>が常に第1レベル<li>と垂直に整列していることを確認するCSSの代替方法はありますか?ありがとう!

+1

一見、 'inline-block 'とは関係ないようです。 – thirtydot

答えて

3

追加: position:relative;div.dropdown ul liに、div.dropdown ul li ul上の余白を取り除くと、それはだ設定top:25pxleft:-1px;width:100%。私はあなたの本当の問題は、絶対位置ulだったと思うhttp://jsfiddle.net/hjDVS/7/

:最後に、私は何かを逃したが、ここでは実施例だかもしれません

...左右のパディングを削除margin:0;div.dropdown ul li ul liを設定し、width:100%を設定

+0

正しい。 IE7には 'top'と' left'を明示的に設定しなければならないことがよくあります。 – thirtydot

+0

@thirtydot私はそれを知っていない! :)ありがとう –

3

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

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

これはあなたのための問題である場合は、良いニュースがあります:彼らはinline作業道inline-blockは、いくつかのケースでになっているので、あなたは、単にdisplay:inline;を使用することができるかもしれせ、別のバグを、持っています。

これを行う場合は、他のブラウザには適切なinline-block;スタイルが必要なので、IE6とIE7だけがこれを行うように注意する必要があります。これを達成するには、ブラウザ固有のハックや条件付きコメントが必要な場合があります。

2

display:inline-blockのルールごとに、IE7スタイルシートに入れてください。zoom:1; display:inline;これはすべての要素で機能し、ほぼ同じように動作します。

関連する問題