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タグの位置について

推薦する

Prometheus を使用して、MySQL の自動増分主キーの残りの使用可能パーセンテージをカウントします。

最近、本番環境のデータベースがログデータを狂ったように書き込み、主キー値のオーバーフローを引き起こし...

Vue の computed と watch の違いを分析する

目次1. 計算入門1.1、getとsetの使い方1.2. 計算された属性キャッシュ2. 時計の紹介3...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

HTML スクロールバーのテキストエリア属性の設定

1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...

シンプルなアコーディオン効果を実現するjs

この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

mysql5.7 でユーザーの初期パスワードを変更する方法

ユーザーが初めて MySQL データベースをインストールするとき、初期のルート パスワードを変更する...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...

JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...

crontab でスケジュールされたタスクが実行されない理由の概要

序文最近、仕事でいくつかの問題が発生しました。crontab でスケジュールされたタスクが実行されま...

Linux で iostat コマンドを使用するチュートリアル

序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...

複数の例で HTML フォームを使用する方法

参考までに、HTMLフォームの使い方を9つの簡単な例で分析します。具体的な内容は次のとおりです。 1...

ウェブ クラスターの Docker Stack 展開方法の手順

Docker はますます成熟し、その機能もますます強力になっています。 Docker Stack を...

MySQLクエリキャッシュの簡単な使い方の詳細な説明

目次1. クエリキャッシュの実装プロセス2. クエリキャッシュを構成する3. クエリキャッシュを有効...

MySQL データベース クエリ パフォーマンス最適化戦略

クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...