IE6互換インラインブロックメソッド_html/css_WEB-ITnose

もしかしたら、IE が display:inline-block 属性をサポートしていないことに疑問や反対意見を表明する友人もいるかもしれません。 「IE の a やspan などのインライン要素で display:inline-block を使用していますが、常に機能します。」

実際には、そうではありません。IE でインライン要素に display:inline-block を使用すると、IE でレイアウトがトリガーされるため、インライン要素は認識されません。 has display:inline- block 属性の症状。上記の分析から、ブロック要素に display:inline-block 属性を設定しても IE で inline-block の効果が得られない理由を理解するのは難しくありません。現時点では、ブロック要素のレイアウトは display:inline-block によってのみトリガーされ、行レイアウトであるため、トリガー後もブロック要素は行レイアウトのままであり、インライン オブジェクトとしてレンダリングされません。オペラのように。

IE のブロック要素で display:inline-block の効果を実現するにはどうすればよいですか?

2 つの方法があります:

1. まず、display:inline-block 属性を使用してブロック要素をトリガーし、次に、display:inline を定義してブロック要素をインライン オブジェクトとしてレンダリングします (2 つのディスプレイを 2 つに配置する必要があります) CSS ステートメントを次々と実行します) これは、IE の典型的なバグです。最初に display:inline-block を定義し、その後表示を inline または block に戻すと、レイアウトは消えません。コードは次のとおりです (...他の属性は省略されています):

div {display:inline-block;...}    div {display:inline;}

2. インライン オブジェクトとしてレンダリングされるブロック要素を直接設定し (display:inline 属性を設定)、ブロック要素のレイアウトをトリガーします。 (ズーム:1 など)。コードは次のとおりです。