检测新的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，即使它被支持。 我检查了 mark 元素，发现其他浏览器（Chrome、Safari）会自动为这个标签添加样式，包括背景颜色和字体颜色。

不幸的是，Firefox 没有像 Chrome 和 Safari 那样为该标签添加样式。但该标签仍然具有黄色背景。

因此，我很困惑它如何成为黄色，即使没有其他样式添加到它上面。 还有人有一种可靠的方法来检测它在浏览器中的兼容性吗？ 谢谢。

- junxi

---

有趣。我的第一反应显然是Firefox拒绝与您在错误位置插入标记，但即使更正错误后，它仍然显示为false。我需要进行更多的检查。 - Mr Lister

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>没有被正式定义为具有黄色背景颜色。当前所有的浏览器都会以此方式显示，但这并不意味着它保证在未来一直能够工作。

- Mr Lister

---

可以运行。你是对的，浏览器可能会改变显示方式。它只是一个解决方法。但为什么它没有添加任何额外的样式却显示为黄色呢？ - junxi