检测新Html5标记<mark> </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，即使它得到支持。 我检查了mark元素，发现其他浏览器（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>未正式定义为黄色背景色。目前所有浏览器都是这样显示的，这并不意味着它保证将来继续工作。