2011-12-21 46 views
1

我有一個選擇下拉列表,應該表示網站中的頁面層次結構。javascript檢測選項標記文本縮進功能或檢測瀏覽器的類型作爲後備

<select id="parent" name="parent"> 
<option value="">(none)</option> 
<option class="inset0" value="home">home</option> 
<option class="inset1" value="aboutpage">aboutpage</option> 
<option class="inset2" value="about">about</option> 
<option class="inset2" value="staff">staff</option> 
<option class="inset1" value="news">news</option> 
<option class="inset1" value="products">products</option> 
<option class="inset2" value="starter">starter</option> 
<option class="inset3" value="nesso">nesso</option> 
</select> 

該構造是在後端和使用css風格。

option.inset0 {text-indent:0px;} 
option.inset1 {text-indent:10px;} 
option.inset2 {text-indent:20px;} 
option.inset3 {text-indent:30px;} 
option.inset4 {text-indent:40px;} 
option.inset5 {text-indent:50px;} 
option.inset6 {text-indent:60px;} 

這是根據每個頁面在網站層次結構中的深度縮進來顯示的深層顯示選項。但是這個樣式只適用於FireFox,而不適用於Chrome。我知道瀏覽器和操作系統中控件的風格大都不一致,所以我不會去那裏。相反,我想在每個選項的文本之前添加「 - 」字符,以便使層次結構可見。我只需要爲Chrome執行此操作,因爲我在此項目中完全不支持IE。

對象文本的操作將在javascript中完成。

我的問題是這樣的:

知道不推薦的瀏覽器檢測和特徵檢測,而不是青睞,我怎麼能執行一個特徵檢測此瀏覽器的行爲?如果這不可行,是否有快速測試能讓我知道我是在Chrome/webkit還是Firefox/Gecko?

+0

你有沒有看過[Modernizr](http://www.modernizr.com/)? – jabclab 2011-12-21 12:38:42

+0

我沒有真正考慮過它。不過,我覺得加載modernizr只是爲了檢測這種小毛病可能是矯枉過正。 更新:只需瀏覽modernizr文檔。沒有提及輸入渲染。它只處理新的html5輸入類型的支持。 – Andri 2011-12-21 12:42:37

回答

1

我無法想象如何檢測這個特徵。我想也許計算的風格可能沒有設置,但是快速測試顯示它是。

有一個關於檢測WebKit的官方頁面(http://trac.webkit.org/wiki/DetectingWebKit),但它已經有4年了,腳本只是檢查用戶代理字符串,這與jQuery對$.browser.webkit所做的基本相同。

至於專門檢測Chrome,它定義了window.chrome(我找不到官方文檔,但看到Safe feature-based way for detecting Google Chrome with Javascript?),但我猜渲染問題將出現在所有的Webkit瀏覽器中。

+0

$ .browser.webkit然後。謝謝! – Andri 2011-12-21 19:27:33