水平方向に配置されたリスト ( <li>) から作成された基本的なメニューがあり、それぞれにアイコン イメージといくつかのテキストが含まれています。
の 1 つには、アイコンを切り替えることができるように (この例では緑から赤唐辛子に)<li>の追加の画像が含まれdisplay: none;ています。問題は、上の画像に示すように、一部のブラウザーで正しく配置されないことです。とは対照的にvisibilty: hidden;、 を持つ要素はdisplay: none;他の要素の位置に影響を与えてはならず、存在しないかのようにレンダリングする必要があることを理解していましたか?
正しく表示されないブラウザは Google ChromeとSafariですが、Windowsでは MacOS (!?) とIE7 (わかっています...)のみです。私がテストした他のすべてのブラウザーと OS の組み合わせは正常に動作します。
HTMLは次のとおりです。
<ul class="menu">
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li id="change">
<img alt="Red Pepper" src="/red.png" style="display: none;">
<img alt="Green Pepper" src="/green.png">
li
</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
</ul>
CSSは次のとおりです。
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align:center;
margin: 0 0 0 -25px;
padding: 8px 0 0 0;
width: 144px;
height: 35px;
display: inline-block;
background-image: url(../bct-white.png);
background-repeat: no-repeat;
color: #0091c1;
}
アイコン画像の場合：
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
<!--[if lte IE 7]>また、条件付きインポート ( )に基づく別のスタイルシートからのインライン ブロックを認識しないため、IE7 のブラウザー ハックを含める必要がありました。
.menu li {
zoom: 1;
display: inline;
}
ただし、明らかにそのスタイルは OS に関係なく Chrome と Safari に読み込まれないため、Mac で問題が発生することはありません。
HTML とアイコンの表示/非表示の JavaScript 操作をリファクタリングするのが最も簡単な解決策であることはわかっていますが、この問題の原因と解決方法を知りたいです。
アップデート
原因を突き止めました。基本的に、要素の要素スタイルはルールのdisplay: none;要素を<img>オーバーライドします。それを削除してから、 と を切り替えると、問題を再現できます。これは明らかにブラウザのバグであり、要素が表示されていない間は、インライン要素またはブロック要素であってもレイアウトには影響しません。inline.menu imgblockinline
jsFiddles
ノート！私の場合、IE7 を使用すると Fiddle ページが正しく読み込まれませんでしたが、結果の iFrame への直接リンクはhttp://fiddle.jshell.net/z4dU7/3/show/です。
バウンティアップデート!!!
以下に 1 つの修正を投稿しましたが、実際には IE9 で同じレイアウトの問題が発生します。私の答えを進化させたり、改善したりしてください - または、まったく違うものを持ってテーブルに来てください! :)
