javascript 检测选项标记文本缩进功能或检测浏览器类型作为后备

Question

我有一个选择下拉列表，它应该代表站点中页面的层次结构。

<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 中？

Answer 1

我无法想象人们如何检测到这一点。我想也许计算的样式可能没有设置，但快速测试表明它是。

有一个官方页面（http://trac.webkit.org/wiki/DetectingWebKit）关于检测 WebKit，但它已经有 4 年历史了，脚本只是检查用户代理字符串，这基本上与 jQuery 对 $.browser.webkit 所做的事情相同。

至于专门检测Chrome，它定义了window.chrome（我找不到官方文档，但请参阅使用 Javascript 检测 Google Chrome 的基于安全功能的方法？），但我猜渲染问题将出现在所有 Webkit 浏览器中。