如何检测 Safari 3.0.x 中的怪异模式？

Question

Safari 3.0.x 不支持 document.compatMode 属性来检测文档是以标准模式还是以怪异模式呈现。 Safari 3.1 及更高版本确实支持它。如果 document.compatMode 不可用，如何检测 Safari 3.0.x 中的文档模式？

Answer 1

快速 Google 搜索会产生："如何确定文档的兼容模式"

基本上，您创建了一个具有无效 css 样式的 div这只适用于怪异模式。然后检查新 div 的样式以查看 CSS 是否被接受。如果被接受，则文档处于怪异模式。

解释代码 ：

var el = document.createElement('div');
el.style.cssText = 'position:absolute;width:0;height:0;width:1';
var compatMode = el.style.width === '1px' ? 'BackCompat' : 'CSS1Compat';

我会为你测试一下，但我无法运行 Safari。如果可以的话请测试一下并在评论中报告结果。

Answer 2

大多数较新的浏览器都有 compatMode，但某些较旧的浏览器没有。此类浏览器包括 Mac IE 和较旧的 WebKit，例如台式机和许多诺基亚手机上的 Safari 2。

如果 document.compatMode 存在，则检查该值是否不是 “BackCompat”。如果是这种情况，则文档处于标准模式。这为 IE 带来了早期结果。

否则，就没有 document.compatMode ，因此它是一个较旧的浏览器，可能支持标准模式渲染，但只是没有 compatMode 属性。

如果将元素的 width 设置为数值，则文档不处于标准模式。

如果您觉得 if - else 更具可读性，则可以使用它；或者，也可以使用三元赋值。

/* 2010-06-26 Garrett Smith - BSD License */
function isQuirksMode(doc) {
  doc = doc || document;
  var compatMode = doc.compatMode,
      testStyle,
      IS_STANDARDS_MODE = compatMode ? compatMode != "BackCompat" :
      doc.createElement && ((testStyle = doc.createElement("p").style).width = "1", 
       !testStyle.width);
  return !IS_STANDARDS_MODE;
}

这解决了世界各国移动设备（例如诺基亚）中可能存在的较旧的 Webkit 版本。

在IE5.5及以下版本中会返回true。在任何具有损坏的 createElement 的浏览器上，createElement 的存在推断检查都会失败（我相信是 Opera 5）。

避免使用此函数进行一般性推论；始终尝试尽可能具体。