我有一个选择下拉菜单，它应该代表网站中页面的层次结构。
<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?
我无法想象如何特征检测到这一点。我想也许计算机样式可能没有设置，但是一个快速测试显示它是。
有一个关于检测WebKit的官方页面(http://trac.webkit.org/wiki/DetectingWebKit)，但它是4年前的，脚本只是检查用户代理字符串，这基本上是jQuery对$.browser.webkit做同样的事情。
至于具体检测Chrome，它定义了window.chrome(我找不到官方文档，但见安全功能为基础的方式检测谷歌Chrome与Javascript?)，但我猜渲染问题将在所有的Webkit浏览器。