ie6 と ie7 は本当にインラインブロックをサポートしていないのでしょうか? _html/css

ie6 と ie7 は本当にインラインブロックをサポートしていないのでしょうか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:00:03

オリジナル

1020 人が閲覧しました

私はもともと JavaScript の継承についてのブログ投稿を思いつきました。最近学んだばかりで仕事がとても忙しいので、気に入ったら、私のブログをフォローしてください。！

さて、本題に入りましょう。フロントエンドに触れたときは、さまざまなブラウザの互換性の問題に対処しました。今では、IE シリーズの CSS バグに関するブログ記事も書きました。靴、ここをクリックして表示できます。

Inline-block は CSS2.1 の属性で、IE6 や 7 ではこのように inline-block を扱うことがよくあります

.selector {    display: inline-block;    *display: inline;    *zoom: 1;}

ログイン後にコピー

こうすれば IE6 の互換性への対応も問題ありません7. 時間が経つと、私もそれに慣れてきます。IE6 と 7 は inline-block 属性をサポートしていないため、表示モードを変更するためのハックを記述する必要があるからだと思います。しかし、これはそうです。本当にそうですか？実際、inline-block は ie5.5 からサポートされていますが、サポートはそれほど完全ではありません。 MSDN: http://msdn.microsoft.com/zh-cn/library/ie/ms530751(v=vs.85).aspx を参照してください。次に、著者はブラウザ ie5.5 以降が本当にインラインブロックをサポートしているかどうかを証明します。

まず、次の例を見てみましょう:

<!doctype html><html><head>    <meta charset="UTF-8">    <style type="text/css">        html, body, div, span {margin: 0; padding: 0}        .wrapper span {            display: inline-block;            width: 100px;            height: 100px;            border: 1px solid #000;        }    </style></head><body>    <div class="wrapper">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span>    </div></body></html>

ログイン後にコピー

ご覧のとおり、line 要素に display: inline-block; 属性を設定しました。（作者のIETesterの不具合でIE5.5とIE7が開けないので、IETesterでIE6を開き、IE10のブラウザモードでIE7に切り替えています）

ご覧のとおり、 row element IE6 と IE7 では、幅と高さを魔法のように設定でき、それらは同じ行に表示されます (ナンセンス)。 IE6や7ではline要素をinline-blockに設定できるようですが、block要素はどうなるのでしょうか？

<!doctype html><html><head>    <meta charset="UTF-8">    <style type="text/css">        html, body, div, span {margin: 0; padding: 0}        .wrapper div {            display: inline-block;            width: 100px;            height: 100px;            border: 1px solid #000;        }    </style></head><body>    <div class="wrapper">        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </div></body></html>

ログイン後にコピー

IE6 と 7 ではブロック要素を inline-block に設定できないことがわかるため、IE6 と IE7 は実際には inline-block をサポートしていると結論付けることができますが、そのサポートはそれほど包括的ではありません。。リスト要素に関しては、先に進んで試してみることができます

。次のコードを使用してブロック要素を IE6 および 7 の inline-block と互換性があるためです。

<!doctype html><html><head>    <meta charset="UTF-8">    <style type="text/css">        html, body, div, span {margin: 0; padding: 0}        .wrapper div {            display: inline-block;            *display: inline;            *zoom: 1;            width: 100px;            height: 100px;            border: 1px solid #000;        }    </style></head><body>    <div class="wrapper">        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </div></body></html>

ログイン後にコピー

そして、このコードは line 要素にも実用的ですので、何があっても、 show: inline-block; *display: inline; *zoom: 1; だけで間違いなく問題ありません。このため、IE6 および 7 は inilne-block をサポートしていないという誤解も生じています。実際、line 要素については、*zoom: 1 を設定する必要はありませんが、IE6 と 7 ではギャップがありません。ブラウザは改行やスペースをスペースとして認識するため、要素の前に空白ができます。この問題は、要素を同じ行に記述することで解決できます。float: left; を使用すると、問題が解決されます。ブロック要素が同じ行にある、または行要素が幅と高さを設定できない問題は、float: left を使用しないでください

、w3c 標準を思い出します。display: inline-block は使用しないでくださいとも言われていますfloat: left と一緒に使用されます。