<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 カスタム サービス プロセス分析を追加
必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...
今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。 実装され...
この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています...
1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...
説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...
Tencent QQのホームページがリニューアルされ、Webフロントエンド開発がますます注目を集めて...
この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...
大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...
システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...
同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...
画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...
昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...
ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...