display：inline-blockのブラウザサポートを検出

StackOverflow https://stackoverflow.com/questions/601118

質問

ブラウザがCSS属性display：inline-blockをサポートしているかどうかを検出するにはどうすればよいですか

役に立ちましたか？

解決

Javascriptは、JavaScriptのオブジェクトや機能に関連しない純粋なCSS属性であるため、Javascriptでそれを検出する方法はありません。最も良いことは、こちらで互換性を確認することですCSSをリストして使用し、回避策を作成します。

他のヒント

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

テストシナリオと制御シナリオを設定します。たとえば、次の構造を使用します。

  • div
    • div w / content＆quot; test＆quot;
    • コンテンツを含むdiv＆quot; test2＆quot;

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

別の答え：

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

QuirksModeチャートによると、 inline-block はIE6および7です（まあ、それらはそれをサポートしますが、ネイティブの display タイプが inline である要素に対してのみです）。 dサポートされていると想定し、条件付きコメントでIE6 / 7の回避策を適用します。

（注：Firefox 2の inline-block のサポートの欠如を無視し、大多数のユーザーがFF3にアップグレードしたと仮定していますが、短いグーグルはそれを裏付ける数字を発掘しませんでしたYMMV。）

ただし、JavaScriptからのサポートを決定することが唯一の選択肢である場合は、ユーザーエージェントスニッフィングにフォールバックする必要があります。 YAHOO.env.ua クラス「http://developer.yahoo.com/yui/」rel = "noreferrer"> YUIライブラリは、コピーして使用できる便利なコードの塊です。 （これはBSDライセンスであり、YUIライブラリの他の部分に依存せず、コメントなしで約25〜30行です）

Christopher Swasey は非常に正しい。

>

http://ajh.us/test-で彼のテクニックの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 サポートの検出にも機能することに注意してください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top