如何在Safari 3.0.x中检测怪癖模式?

时间:2009-09-29 15:42:57

标签: javascript safari quirks-mode

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

2 个答案:

答案 0 :(得分:3)

快速Google search结果为:"HOWTO determine the document's compatibility mode"

基本上,您创建的div具有无效的css样式,只能在怪癖模式下工作。然后检查新div的样式以查看css是否被接受。如果它被接受,则文档处于怪异模式。

解释the code

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。如果可以,请测试它并在评论中报告结果。

答案 1 :(得分:2)

大多数较新的浏览器都有compatMode,但有些旧浏览器没有。这些浏览器包括Mac IE和较旧的WebKits,例如桌面上的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版本,这些版本可能存在于移动设备中,例如世界各国的Nokias。

它将在IE5.5及更低版本中返回true。对于任何破坏了createElement的浏览器,createElement的存在推断检查都会失败(我相信Opera 5)。

避免使用此功能进行一般推断;总是试着尽可能具体。