ホームページ > 記事 > ウェブフロントエンド > IE7での表示について:インラインブロックのサンプルチュートリアル
今日コーディング中にこの問題に遭遇しました。
インライン要素の場合、その表示属性が inline-block に設定されている場合、すべてのブラウザーがそれをサポートします。
逆に、ブロックレベル要素の場合は、display: inline-block; に設定すると、ie6/ie7 はサポートされません。
IE のインライン要素には display:inline-block を使用します。IE はそれを認識しませんが、display:inline-block を使用すると、IE でレイアウトがトリガーされ、インライン要素に display:inline-block 属性が設定されます。 。
現時点では、ブロック要素はdisplay:inline-blockによってのみレイアウトされており、それ自体は行レイアウトであるため、トリガー後もブロック要素はまだ行レイアウトのままであり、のようにインラインでレンダリングされませんOpera オブジェクトのブロック要素。
解決策:
1. (今回はこれを使用しました)
インラインオブジェクトとしてレンダリングされるブロック要素を直接設定し(display:inline属性を設定)、ブロック要素のレイアウト (例:zoom:1 または float 属性など)。コードは次のとおりです:*/*推奨: IE6、7*/DIV {
表示: インラインブロック;
*表示: インライン; }
3つとも必須です
/*推奨*/div {
_zoom:1;
}
2. (ここにコピーします)
初めての使用display:inline-block 属性を使用してブロック要素をトリガーし、display:inline を定義してブロック要素をインライン オブジェクトとしてレンダリングします (2 つのディスプレイは順番に配置する必要があります。これは 2 つの CSS ステートメントでのみ有効です。これはIE の典型的なバグです。先に display:inline-block を定義してから、表示を inline または block に戻すと、レイアウトは消えません。)コードは次のとおりです (...他の属性の内容は省略されています):
div {display:inline-block;...}
div {display:inline;}
以上がIE7での表示について:インラインブロックのサンプルチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。