8

ブラウザが CSS 属性 display:inline-block をサポートしているかどうかをどのように検出できますか?

4

5 に答える 5

12

さて、ユーザー エージェント スニッフィングの代わりに JavaScript を使用してブラウザの動作を調べることで純粋に実行したい場合は、次のようにします。

テスト シナリオとコントロール シナリオを設定します。たとえば、次の構造を使用します。

  • 分周
    • div w/ content "test"
    • コンテンツ「test2」の div

2 つの内部 div が inline-block に設定されたドキュメントに 1 つのコピーを挿入し、2 つの内部 div がブロックに設定されたドキュメントに別のコピーを挿入します。ブラウザーがインライン ブロックをサポートしている場合、含まれている div の高さは異なります。

別の答え:

getComputedStyle を使用して、ブラウザーが特定の要素の css をどのように処理しているかを確認することもできます。したがって、理論的には、「display: inline-block」を含む要素を追加してから、computedStyle をチェックして、存続するかどうかを確認できます。唯一の問題: IE は getComputedStyle をサポートしていません。代わりに、currentStyle があります。currentStyle が同じように機能するかどうかはわかりません (おそらく、「無効な」値を無視するという、私たちが望む動作と同様に機能します)。

于 2009-03-02T04:38:56.620 に答える
7

QuirksMode チャートによると、サポートされていないメインストリーム ブラウザinline-blockは IE6 と 7 だけdisplayですinline。条件付きコメント経由の IE6/7 。

(注: Firefox 2 が FF3 をサポートしていないことは無視してinline-blockおり、大多数のユーザーが FF3 にアップグレードしたと仮定していますが、簡単なグーグル検索ではそれを裏付ける数字は見つかりませんでした.YMMV.)

ただし、JavaScript からのサポートを判断することが唯一の選択肢である場合は、ユーザー エージェント スニッフィングにフォールバックする必要があります。YUI ライブラリーのYAHOO.env.uaクラスは、コピーして使用できる便利なコードの塊です。(これは BSD ライセンスであり、YUI ライブラリの他の部分に依存せず、コメントなしで約 25 ～ 30 行しかありません)

于 2009-03-02T03:01:48.740 に答える
3

ちなみに、CSSのみを使用して、IE6 +、FF2 +、Opera、およびWebKitにクロスブラウザーインラインブロックを実装するための優れた方法があります。（有効なCSSではありませんが、それでもCSSのみです。）

于 2010-02-04T10:54:28.530 に答える
2

Christopher Swaseyはまったく正しいです。

http://ajh.us/test-inline-blockで彼のテクニックの jsFiddle デモをセットアップしました。

コードは基本的に次のとおりです。

var div = document.createElement('div');
div.style.cssText = 'display:inline-block';

// need to do this or else document.defaultView doesn't know about it
$('body').append(div); 
// that was jQuery. It’s possible to do without, naturally

var results = false;

if (div.currentStyle) {
    results = (div.currentStyle['display'] === 'inline-block');
} else if (window.getComputedStyle) {
  results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block';  
}

//clean up
$(div).remove();

alert('display: inline-block support: '+results);

display: run-inこれとまったく同じ手法がサポートの検出にも機能することに注意してください。

于 2011-02-19T08:21:59.863 に答える
1

これは純粋な CSS 属性であり、Javascript のオブジェクトや関数に関連していないため、Javascript でそれを検出する方法はありません。私が言える最善のことは、ここでかなり優れた互換性リストを確認し、CSS を使用して回避策を作成することです。

于 2009-03-02T02:53:47.043 に答える