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。我知道控件的样式在浏览器和操作系统之间很大程度上是不平衡的，所以我不会去那里。相反，我想在每个选项的文本之前添加“-”字符，以使层次结构可见。我只需要为 Chrome 执行此操作，因为我在这个项目中根本不支持 IE。

对象文本的操作将在 javascript 中完成。

我的问题是这样的：

知道不推荐浏览器检测，而是优先使用特征检测，我该如何针对这种浏览器行为执行特征检测？如果这不可能，是否有一个快速测试可以让我知道我是在 Chrome/webkit 还是 Firefox/Gecko 中？

4

1 回答 1

1

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

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

至于具体检测 Chrome，它定义了window.chrome（我找不到官方文档，但请参阅Safe feature-based way for detection Google Chrome with Javascript?），但我猜渲染问题将出现在所有 Webkit 浏览器中。

于 2011-12-21T15:23:09.380 回答