为低于 35 的 Firefox 版本添加 CSS class 名称到 HTML 标签

Question

我正在寻找 select 菜单的可靠工作流程。我有条件评论 ie 10+

<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html class="gt9"> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

而 Chrome 在涉及 hiding/showing select 箭头时表现得很好：

-webkit-appearance: none;

但是对于 Firefox：

-moz-appearance:none;

适用于 35+ 版本。这意味着 FF<35 将显示我的自定义背景图像箭头及其在 select 菜单上的默认值。因此，隐藏这些旧版浏览器的下拉箭头是跨浏览器解决方案的最后一道障碍。

如何为 35 版之前的 Firefox 浏览器定位背景图像？ 我知道 modernizer 或其他库可能能够这样做，但是将 class 名称添加到 < html> 或我不知道的供应商特定伪元素是过大的。提前致谢。

Answer 1

您可以使用 JavaScript 来检测版本。

var frags = navigator.userAgent.split('/');

if ((frags[frags.length - 2].indexOf('Firefox') > -1) && (parseFloat(frags[frags.length - 1]) < 35)) {
  alert('You are on Firefox version < 35')
}

为低于 35 的 Firefox 版本添加 CSS class 名称到 HTML 标签

Add a CSS class name to HTML tag for Firefox versions less than 35

css

firefox

mozilla