1

サイト内のページの階層を表すことになっている選択ドロップダウンがあります。

<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では機能しません。コントロールのスタイルはブラウザとオペレーティングシステムの間で大きく不均一であることを知っているので、そこには行きません。代わりに、階層を表示するために、各オプションのテキストの前に「-」文字を追加したいと思います。このプロジェクトではIEをまったくサポートしていないため、これをChromeで行う必要があるだけです。

オブジェクトのテキストの操作はjavascriptで行われます。

私の質問はこれです：

ブラウザの検出は推奨されておらず、代わりに機能の検出が優先されることを知っているので、このブラウザの動作に対して機能の検出を実行するにはどうすればよいですか？これが不可能な場合、Chrome/webkitまたはFirefox/Geckoのどちらを使用しているかを知るための簡単なテストはありますか？

4

1 に答える 1

1

どのように機能がこれを検出するのか想像できません。計算されたスタイルが設定されていない可能性があると思いましたが、簡単なテストで設定されていることがわかりました。

WebKitの検出に関する公式ページ（http://trac.webkit.org/wiki/DetectingWebKit）がありますが、それは4年前のものであり、スクリプトはユーザーエージェント文字列をチェックするだけです。これは基本的にjQueryが行うのと同じことです$.browser.webkit。

Chromeの具体的な検出については、定義されていますwindow.chrome（公式のドキュメントは見つかりませんが、Javascriptを使用してGoogle Chromeを検出するための安全な機能ベースの方法を参照してください）が、レンダリングの問題はすべてのWebkitブラウザーにあると思います。

于 2011-12-21T15:23:09.380 に答える