IE11でli inside-blockが無効になる理由

最近、改行を必要としない Web ページのタグ リストを作成していました。最初は簡単だと思いましたが、数秒でコードを書き終え、Firefox と Chrome ブラウザーでのテストに合格しました。 IE11 で見たところ、予想外の効果、li inside-block は IE11 では無効でした。まだラインを変えています！

li inside-block は IE11 でもまだラップされますか?

li inside-block は IE11 でもラップされます。なぜ機能しないのでしょうか?コードは依然として IE11 をハッキングする必要がありますか?しかし、他の人のWebサイトの書き方ではIE11をハックしないことがわかりました。

実際、コードは非常にシンプルで、Chrome および Firefox ブラウザーで期待される結果を完全に実現します。

コアの CSS コードは次のとおりです:

ul li{
    display:inline-block;
    padding:3px 4px 3px 4px;
    margin:3px 3px 3px 0px;
}

display:inline-block を使用して、改行なしで li リストを設定します。

HTML のコア コードは次のとおりです:

<ul>
    <li>tag1</li>
    <li>tag2</li>
    <li>tag3</li>
</ul>

結果は次のようになります:

これの代わりに、display:inline-block を使用して改行なしで li リストを設定します

:

None display:inline- ブロックすると、li は新しい行をリストします

JD.com の HTML コードで IE11 が無効になる理由を見つけました

上記の問題は、私を数日間悩ませ、一度リストされたコードメソッドを放棄しました。 li の記述方法を採用して div の記述方法を採用しましたが、li の記述方法が正しい方法であり、コードがより簡潔であるため、まだそうすることに抵抗がありました。

今日、JD.com で携帯電話を閲覧していて、横の列にあるラベルのリストに惹かれ、その Web ページの HTML ソース コードを見ると、これも li enumeration と display:inline を使用して実装されていることがわかりました。 -ブロック。

JD のタグ リスト

JD.com のこの Web ページから、IE11 にも適用できるタグ リスト コードを見つけることにしました。

もう待てません。今すぐ行動を起こしてください。

ローカルに構築されたデバッグ環境で新しい HTML ファイルを作成し、京東 Web ページの HTML ソース コードをコピーし、「除外方法」を使用して、このタグにリストされている DIV だけが残るまでコードを徐々に削除します。

一定期間のコード削除作業の後、残っているコードはどんどん少なくなり、答えはより明確になるはずです。

その苦労が報われ、ついに答えを見つけました！何日も悩まされていた問題がついに解決しました！

この文を Web ページ

に追加する必要があることがわかりました:

つまり、このページでは IE 互換表示が使用されていないということです。

IE 互換表示は、Web ページのレイアウトの混乱を避けるために、IE ブラウザーの以前のバージョンを使用して Web ページを表示しますが、互換表示によって特定のスタイルが消去され、Web ページの特定の領域のレイアウトが期待どおりにならないことがわかりました。 。 効果。したがって、Web ページをデザインするときは、この Web ページをレンダリングするために互換ビューを使用しないように IE ブラウザに指示する必要があります。

以上がIE11でli inside-blockが無効になる理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。