如何通过“特征”检测来避免浏览器嗅探......？答案

【问题标题】：how to avoid browser sniffing by doing "feature" detection instead...?如何通过“特征”检测来避免浏览器嗅探......？
【发布时间】：2011-08-01 17:39:08
【问题描述】：

所以，假设我有一个内联块元素。所以这不适用于 ie6 或 FF2...

假设我用 css hacks 和使用 -moz-inline-stack 来弥补它......

现在，假设 inline-block 元素也是 position: relative，所以它是一个容器，并且有一个位置 absolute, top:0, right: 0 的子元素。

在旧版浏览器中，子元素位于屏幕的右上角，而不是 inline-block 容器元素的右上角...

现在，我可以通过将 div 包裹在我的子元素周围并将其设为“相对位置”来解决此问题...但如果可能的话，我希望避免使用不必要的标记。

最初我想做：

if (browser == ie6 || browser == ff2) {
  wrap child element with div for older browser..
} 
else {
  assume everything is fine
}

但我认为这样做会更好：

if (child element is at the top right of the screen) {
  wrap child element with div for older browser..
} 
else {
  assume everything is fine
}

所以我只是好奇，这里的人会如何推荐这种东西。

谢谢！

【问题讨论】：

【解决方案1】：

一般来说，Modernizr 的浏览器功能检测效果最好。现代化

为元素添加类这使您可以针对特定的您的浏览器功能样式表。你实际上不需要编写任何 Javascript 来使用它。

虽然它可能不适用于您的特定场景，但 Modernizr 也可以进行 CSS 特征检测。例如，

你有没有想过 CSS 中的 if 语句提供很酷的功能，例如边界半径？好吧，有了 Modernizr 你可以做到这一点！

【讨论】：