inline-blockプロパティとの互換性

inline-blockプロパティとの互換性
<br />1年前、インターネット上にはinline-blockプロパティに関する記事はありませんでした。このプロパティを皆さんにもっと理解してもらうために、当時の記事をまとめて「display:inline-blockを徹底的に理解する」という記事を作りました。
現在、inline-block 属性の使用に対する要望がますます高まっています。残念ながら、Firefox 3 ベータ、IE8 ベータ、Opera、Safari のみが inline-block 属性をサポートしています (注: 元々は Opera と Safari のみがサポートしていました)。ただし、IE6 と IE7 は hasLayout をトリガーすることでこれをシミュレートできます。Firefox 2 には -moz-inline-box と -moz-inline-stack のプライベート属性があります (この 2 つの属性の比較は Qin Ge の「display:inline-block の 2 つの適用例」から引用されています)。
実際のアプリケーションでは、-moz-inline-box は要素間の配置などの問題を抱えることになります。Firefox にも配置の問題を解決するためにプライベート属性 -moz-box-align がありますが、予測が難しく、問題も多くあります。相対的に言えば、-moz-inline-stack は inline-block に似た動作をし、Firefox3 でテストできます。ただし、-moz-inline-stack を使用する場合はバグがあります。display:-moz-inline-stack; を持つ要素の外側の要素が display:inline; の場合、そこに含まれるリンクは Firefox でクリックできなくなります。これは、position:relative; を使用して解決する必要があります。
最後に、シミュレーションしたコードは次のようになります。
display:inline-block; /*Firefox3 ベータ版、IE8 ベータ版、Opera、Safari でサポートされ、IE のインライン要素の hasLayout をトリガーします*/
display:-moz-inline-stack; /* Firefox のプライベート プロパティ。-moz-inline-box も使用できます */
zoom:1; /*IEでhasLayoutをトリガー*/
*display:inline; /*IE で hasLayout がトリガーされると、ブロック要素を inline に設定すると、display:inline は display:inline-block と同じ効果を持つようになります*/
テキストインデント:-9999px;
*テキストインデント:0;
フォントサイズ:0;
line-height:0; /* テキストを非表示にする必要がある場合は、これらの 4 つの属性を使用できます*/
/* さらに、上のテキストを非表示にするには、より簡単な方法を使用できます: line-height: super large value; font-size: 0; */
overflow:hidden; /*オーバーフローコンテンツを非表示*/
vertical-align:middle; /* Opera の大きな偏差のために行を垂直中央に配置する*/
幅:? px; /*?自動でない値*/
身長:? px; /*?自動でない値*/

<<:  Nginx サーバーが Systemd カスタム サービス プロセス分析を追加

>>:  XHTMLにおけるH1タグの位置について

推薦する

jQueryは検証コード送信のコントロールボタンを無効にする機能を実装します

必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...

画像マーキー効果を実現するネイティブJS

今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。 実装され...

Vueは小さなメモ帳機能を実装しました

この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています...

HTML コードを書くための 30 のヒント

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

Vueテクノロジーに基づく再帰コンポーネントの実装方法

説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...

Web 標準アプリケーション: Tencent QQ ホームページの再設計

Tencent QQのホームページがリニューアルされ、Webフロントエンド開発がますます注目を集めて...

Vue は小数点付きの星評価を実装します

この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

Dockerのインストール、イメージの作成、NodeJSプログラムの読み込みと実行の詳細なプロセス

システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...

MySQL データ型 DECIMAL(N,M) における N と M の意味の詳細な説明

同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...

CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...

ウェブページ制作と饅頭の関係(体験の共有)

昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...

Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明

ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...

Elasticsearch を使用する際の一般的な問題の解決策

1. redis で使用すると Netty の起動競合が発生するため、***Application ...

Vueのメソッドとプロパティの詳細な説明

Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...