检测新的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中每晚都会返回false，甚至支持它。我检查标记元素，发现其他浏览器(chrome，safari)将自动添加此标记的样式，其中包括背景色和颜色。

​

​

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

​

​

所以我搞不懂它怎么会是黄色的，虽然没有其他的风格。有没有人有可靠的方法来检测浏览器中的兼容性呢？谢谢。

Answer 1

例程的问题是火狐不能在这个上下文中使用像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;

这将适用于火狐和Chrome。

见JSFiddle。

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