检测新 Html5 标签 <mark> 的兼容性

Question

如何检测新标签的兼容性。我正在使用这样的方法（使用 jQuery）：

var $mark = $('<mark>');
$mark.appendTo('html');
var bg = $mark.css('background');
if (/rgb\(255\, 255\, 0\)/.test(bg)) return true;
else return false;

但问题是它在 firefox nightly 中返回 false，即使它是受支持的。 我检查了标记元素，发现其他浏览器（chrome、safari）会自动为这个标签添加一个样式，其中包括背景颜色和颜色。

不幸的是，Firefox 没有像 chrome 和 safari 那样为标签添加样式。但是标签也有黄色背景。

所以我很困惑它怎么可能是黄色的，尽管没有添加其他样式。 有没有人有可靠的方法来检测它在浏览器中的兼容性？ 谢谢。

Answer 1

您的例程的问题是 Firefox 不能在这种情况下使用像 background 这样的速记属性。

解决方案：使用backgroundColor。

var $mark = $('<mark>');
$mark.appendTo('body');
var bg = $mark.css('backgroundColor');
if (/rgb\(255\, 255\, 0\)/.test(bg)) return true;
else return false;

这适用于 Firefox 和 Chrome。

见JSFiddle。

但请注意，<mark> 并未正式定义为具有黄色背景色。目前所有浏览器都这样显示它的事实并不意味着它可以保证在未来继续工作。