0

質問の抜粋: すべてのブラウザーで機能するメニューがありますが、IE7 ではバグがありました。私はスローイングを解決zoom:1しましたが、通常、hasLayout関連する問題にはフロート、位置などが含まれます。今回zoomはなぜそれが機能したのですか？

次のようなすべてのブラウザ（IE8 +でも）で機能するメニューがあります。 すべてのブラウザのメニュー

.png BG を使用して 1px の境界として機能するLIを保持すると、アイコンとテキストを含むブロックで構成されます。DIVA

再開された HTML は次のようになりますul.adminMenu>li>(div.menuBorder)+(a{link})。

<ul class="adminMenu">
    <li>
        <div class="menuBorder"></div>
        <a href="">link</a>
    </li>
    (...other li's...)
</ul>

li.active暗いBGになります。

残念ながら、IE7 標準モードで動作させる義務があります (これが、RGBA ボーダーの代わりに .png で div を使用する理由を説明しています)。これは次のようになります。

IE7 のメニュー

はい。listartと "border"の間には任意のスペースがありdivます。私はすでに次の方法を試しました：

それらのどれも機能しておらず、開発ツールにはマージンまたはボーダーを指すものは何もありません (すべて 0 で!important)。

問題は次 のとおりです。浮動要素はなく、絶対配置のものもありません。ブロックだけです。なぜzoom:1(どのトリガーがhasLayout) すべての忌まわしいスペースをなくすのですか?

JsFiddle (余分なマークアップ div がいくつかありますが、それらは無視します。簡単にするために削除したものは他にもあります)

それがIEの「機能（バグ）」の一部であることは知っていますが、答えとして何か他のものを探していました。

4

1 に答える 1

1

リスト

リストは、リスト (ol、ul) またはリスト要素 (li) に適用されるレイアウトの影響を受けます。IE のバージョンが異なれば、反応も異なります。最も明白な影響はリスト マーカーにあります (マーカーが必要ない完全にカスタマイズされたリストでは、これらの問題は発生しません)。マーカーはおそらく、リスト要素に多少「関連付けられた」いくつかの要素を内部的に追加することによって作成されます (通常はハングします)。それらのうち）そしてかなり不安定に見えます。残念ながら、「内部」のみのオブジェクトであるため、アクセスして不正な動作を修正することはできません。

最も明白な効果は次のとおりです。

リストにレイアウトを適用すると、マーカーが消えたり、別の位置に配置されたり間違った位置に配置されたりします。

リスト要素のマージンを変更することで復元できる場合があります。これは、レイアウト要素がぶら下がっている内部要素をトリミングする傾向があるという事実の結果のようです。

リスト要素に適用されるレイアウトは、上記と同じ問題を引き起こします (リスト項目間の余分な垂直スペース)

さらなる問題は、(順序付きリストでは) レイアウトを持つリスト要素には独自のカウンターがあるように見えることです。5 つの要素を持つ順序付けられたリストがあり、3 番目の要素だけがレイアウトを持っているとしましょう。これを見てみましょう：

1... 2... 1... 4... 5...

さらに、レイアウトを持つリスト要素が複数の行に表示される場合、マーカーは垂直方向に下部に配置されます (予想されるように、上部には配置されません)。

これらの問題のいくつかは解決できないため、マーカーが必要な場合は、リストやリスト要素でのレイアウトを避ける方がよいでしょう。何らかの寸法を適用する必要がある場合は、他の要素に適用することをお勧めします。たとえば、幅を外部ラッパーに適用し、高さを各リスト項目のコンテンツに適用できます。

IE のリストに関するもう 1 つの一般的な問題は、li のコンテンツが display: ブロックのアンカーである場合に発生します。これらの条件では、リスト項目間の空白は無視されず、通常、li ごとに余分な行として表示されます。この余分な垂直方向のスペースを回避する方法の 1 つは、ブロック アンカーにレイアウトを与えることです。これには、アンカーの長方形領域全体をクリック可能にするという利点もあります。

詳細については、http: //www.satzansatz.de/cssd/onhavinglayout.htmlをご覧ください。

于 2013-05-10T02:27:18.797 に答える