檢測瀏覽器支持顯示：內嵌塊

1

沒有辦法檢測到使用Javascript，因爲它是一個純CSS屬性，它與Javascript中的任何對象或函數無關。我可以告訴你的最好的事情是檢查here是否有很好的兼容性列表，並使用CSS創建解決方法。

2009-03-02 02:53:47

+0

@Alan H .:嗨！我不認識你，但我感謝你對我的回答提出的建設性批評！我也期待着你對這個問題的回答，你向我們展示瞭如何去做。你會告訴我們的方式，對吧？ :) – 2011-02-18 01:21:02

+1

http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting實際上，Christopher Swasey提供了一種方法來在下面的答案中用JS來檢測它。至少Alan H.在你的回答中寫下他認爲是問題的東西。沒有那種奢侈，我就會對舊的答案望塵莫及。 – Boldewyn 2011-02-18 07:36:48

+0

@Boldewyn：我會認爲你鏈接到的文章和Christopher Swasey的回答都是變通方法（*好的解決方法，但是變通辦法）。我仍然相信沒有「乾淨」的方式來檢測瀏覽器對特定CSS功能的支持。我也不會把艾倫的評論稱爲奢侈品。 :) – 2011-02-18 14:07:17

7

按照QuirksMode charts，不支持inline-block唯一的主流瀏覽器IE6是和7（嗯，他們支持它，但僅適用於具有天然display類型的inline元素。）我只是假設它是支持然後通過conditional comments針對IE6/7應用解決方法。

（注：我忽略了Firefox 2中的缺乏支持inline-block，並假設絕大多數用戶都升級到FF3，但短暫的谷歌搜索沒有任何挖掘的數字備份，高達因人而異。）

但是，如果確定來自JavaScript的支持是您的唯一選擇，那麼您將不得不退回到用戶代理嗅探。 YUI library中的YAHOO.env.ua類是您可以複製和使用的一小段代碼。（它是BSD許可的，不依賴於YUI庫的其他部分，並且只有大約25-30行沒有評論）

來源

2009-03-02 03:01:48

+0

剛剛查看了我網站上的統計數據，他們似乎支持你的假設，即大多數FF用戶已升級到FF 3. IMO決定爲未來設計一個好主意。 – 2009-03-02 04:13:02

12

那麼，如果你想純粹通過檢查bavhiour的瀏覽器w/javascript代替用戶代理嗅探：

設置測試場景和控制場景。有了，比方說，以下結構：

格
- DIV W /內容「測試」
- DIV W /內容「test2的」

插入一個拷貝到將兩個內部div設置爲內嵌塊的文檔，並將另一個副本插入到文檔中，並將兩個內部div設置爲阻止。如果瀏覽器支持內嵌塊，則包含的div將具有不同的高度。

~~備選答案：~~

您還可以使用到的getComputedStyle看到瀏覽器是如何處理特定元素的CSS。因此，從理論上講，您可以添加一個元素「display：inline-block」，然後檢查computedStyle以查看它是否存活。唯一的問題：IE不支持getComputedStyle。相反，它有currentStyle。我不知道currentStyle的功能是否相同（大概它的功能類似於我們想要的行爲：不考慮「無效」值）。

來源

2009-03-02 04:38:56

3

順便說一句：有a neat way在IE6 +，FF2 +，Opera和WebKit中僅用CSS來實現跨瀏覽器內聯塊。（不是有效的CSS，但仍然只有CSS。）

來源

2010-02-04 10:54:28 Boldewyn

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-19 08:21:59

檢測瀏覽器支持顯示：內嵌塊

回答

相關問題