使Web 应用程序能够适应多种浏览器
www.seolabs.cn
级别: 中级
Hong Guang (ho...@cn.ibm.com), 软件工程师, IBM
在不同的浏览器或具有不同设置的浏览器上，Web 页面的执行方式不一样。本文学习一些有用的技巧，帮助您让自己的 Web 应用程序更适应所有的环
境。
不同 Web 浏览器的特性，比如语言设置和 JavaScript 支持，会导致 Web 应用程序在不同浏览器中的工作方式不一致。浏览器之间的不
一致性不但会导致应用程序看起来很糟糕，而且常常使它无法工作。本文将给出一些技巧，您可以使用这些技巧解决这类问题。
处理不同种类的浏览器
Web 页面无法在任何地方都顺利工作的主要原因是，不同种类的浏览器支持不同的标准。克服这个问题的最佳方法是只使用通用的属性和方法。但是，有时候
必须编写特殊的代码。
实现 innerText 属性
使用 innerText 属性设置或获取在一个对象的开始标记和结束标记之间的文本，这个属性只在 Microsoft® Windows®
Internet Explorer® 中定义了。尽管这个属性得到了广泛的使用，但它不是标准属性。可以使用 innerHTML 替代它，但是它们
并不相同。innerText 属性提供了特殊特性，比如能够直接获得子节点的文本，这可以帮助我们编写更干净的代码。您也可能遇到使用
innerText 属性的遗留页面。通过自己实现 innerText 属性，可以让这些页面支持更多的浏览器。例如，可能需要在基于
Mozilla 的浏览器中实现这个属性；清单 1 展示了实现方法。
清单 1. 为基于 Mozilla 的浏览器实现 innerText
HTMLElement.prototype.__defineGetter__
(
"innerText",function()
//define a getter method to get the value of innerText,
//so you can read it now!
{
var textRange = this.ownerDocument.createRange();
//Using range to retrieve the content of the object
textRange.selectNodeContents(this);
//only get the content of the object node
return textRange.toString();
// give innerText the value of the node content
}
);
获得滚动值和窗口大小
大多数 Web 应用程序需要几何值，比如窗口大小和滚动值。但是，浏览器可以在不同的属性中存储这些值；一些属性甚至是名称相同而含义不同。更好的方
法是创建自己的独特的变量来表示这些属性值。清单 2 演示了如何在多数主流浏览器中创建独特的属性。
清单 2. 将一些通用变量定义为独特的属性，可以用来存储几何值
var scrollLeft,scrollTop;
// scrollLeft: The distance between the horizontal scrollbar
// with the left edge of the frame.
// scrollTop: The distance between the vertical scrollbar
// with the top edge of the frame.
// Get the scroll value from different browsers.
// Determine the browser type first.
// And then get the value from the particular property.
if (window.pageYOffset){
scrollTop = window.pageYOffset
} else if(document.documentElement &&
document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
} else if(document.body){
scrollTop = document.body.scrollTop;
}
if(window.pageXOffset){
scrollLeft=window.pageXOffset
} else if(document.documentElement &&
document.documentElement.scrollLeft){
scrollLeft=document.documentElement.scrollLeft;
} else if(document.body){
scrollLeft=document.body.scrollLeft;
}
var windowWidth,windowHeight; // frame width & height
if(window.innerWidth){
windowWidth=window.innerWidth;
} else if(document.documentElement &&
document.documentElement.clientWidth){
windowWidth=document.documentElement.clientWidth;
} else if(document.body){
windowWidth=document.body.offsetWidth;
}
if(window.innerHeight){
windowHeight=window.innerHeight;
} else if(document.documentElement &&
document.documentElement.clientHeight){
windowHeight=document.documentElement.clientHeight;
} else if(document.body){
windowHeight=document.body.clientHeight;
}
双向语言中的窗口原点
一些语言（比如 Arabic 和 Hebrew）被称为双向语言，这意味着它们是从右到左阅读的。当前的浏览器支持从右到左显示内容。但是，当页面从
右到左显示时，Internet Explorer 定义了不同的窗口原点。这个原点并不在画布的左上角，而是在可见部分的左上角。这意味着页面的某些
部分会有负的 x 值，这会使页面的某些元素出现在错误的位置上。图 1 显示当页面从右到左显示时 Internet Explorer 中原点的位
置。
图 1. 当页面从右到左显示时 Internet Explorer 中的原点
请记住，当页面在 Internet Explorer 中从右到左显示时，必须修改算法，比如按照原点的偏移量调整元素的位置。
获得多行的树视图列表
使用 <ul> 和 <li> 标记显示树视图列表。但是基于 Mozilla 的浏览器不允许在 <li> 标记中嵌入其他元素，所以只能使用简单的
列表项。为了解决这个问题，可以使用表格创建树视图列表。通过使用 TABLE 而不是 LI 来实现列表项，可以建立复杂的列表项。
但是，当 TABLE 有多列时，就会再次遇到问题。在用鼠标重设窗口大小时，会产生怪异的效果。图 2 是重设窗口大小之前的页面。
图 2. 在重设窗口大小之前，列对齐到网格上
图 3 显示重设框架大小之后的页面；列不再对齐到网格上。
图 3. 重设窗口大小之后；列不再对齐到网格上
可以给树视图的表格中的 TD 设置宽度，但是这种方法不好，因为 TD 的宽度只意味着它的最大尺寸，所以在您重设窗口大小时，浏览器可能会重设
TD 的大小来显示更多内容。为了实现有组织的外观，需要其他东西 —— DIV。（在本文中，DIV、TABLE 和 TD 代表 DOM 树中的节
点；当然，也可以将它们当作 HTML 标记对待。）
不幸的是，您很快就会意识到 DIV 会造成相似的问题。DIV 的宽度不是绝对的，而是最小宽度。如果改变窗口的大小，一些浏览器也会改变 DIV
的宽度。那么，如果将 TD 和 DIV 组合起来怎么样呢？如果将 DIV 嵌套在 TD 中，那么单元格的最大和最小尺寸都定义了。现在就有了一个
固定的大小，如 图 4 所示。
图 4. 在 DIV 的帮助下，页面看起来效果很好
回页首
处理多种语言
当应用程序支持多种语言时，要记住相同的文本在不同的语言中可能有不同的长度，这可能会使页面看起来很糟糕。调整包含文本的 DIV 可以帮助解决这个
问题。
为 DIV 定义合适的大小
假设您希望使用 DIV 建立一个弹出菜单。但是，如果没有给菜单设置固定的大小，在滚动页面时就会遇到一个问题，如 图 5 所示。
图 5. 滚动页面会导致文本溢出
可以看到，文本溢出了。如果 DIV 没有设置固定的大小，Internet Explorer 就会自动地把 DIV 设置为可见部分的大小。所以，
当滚动页面以查看不可见部分时，DIV 不够大，导致文本溢出。为了解决这个问题，必须给 DIV 设置固定的大小。
现在，需要了解如何处理这个大小。不能对这个大小进行硬编码，因为如果支持多种语言，DIV 中文本的长度是不固定的。需要动态地获取文本的长度，然后
设置 DIV 的大小。表格在这种情况下会有所帮助。表格的大小与它的可见性无关。清单 3 演示如何给 DIV 设置合适的宽度。
清单 3. 按照其中文本的长度设置 DIV 的宽度
var leftmenu = document.getElementById("leftmenu");
var divWidth =
parseInt(document.getElementById("divtable").offsetWidth);
leftmenu.style.width = divWidth +"px";
回页首
处理不同的浏览器设置
不但是不同的浏览器和语言会导致问题，有时候用户也会导致问题。当用户在他们的浏览器中进行特殊的设置时，常常会导致问题。例如，禁用
JavaScript 功能就会给应用程序造成难题。
支持那些不支持 JavaScript 的浏览器
一些用户仍然使用老的浏览器版本，还有一些用户在浏览器中禁用了 JavaScript，这会导致 Web 页面的显示不正确。为了处理这个问题，可以
使用 <noscript> 标记。只需在这个标记中添加一些文本，告诉用户他们的浏览器不支持 JavaScript，因此不能正确地查看页面。清
单 4 演示了所用的代码。
清单 4. 告诉用户他们为什么无法看到正确显示的页面
<html>
<head>
<noscript>
Your browser does not support JavaScript,
or you've disabled the JavaScript in your browser,
so you cannot view this page correctly.
</noscript>
</head>
</html>
但是，对于这个问题更好的解决方案是，为 Web 应用程序提供另一个不依赖于 JavaScript 的版本。这样的话，无论用户是否启用了
JavaScript 支持，他们都能够使用您的应用程序。使用 清单 5 所示的代码将用户定向到非脚本版本。
清单 5. 将应用程序定向到非脚本版本
<noscript>
<meta http-equiv="REFRESH" CONTENT="0;URL=noscriptversion.jsp?">
</noscript>
结束语
在本文中，我提供了一些提示，比如如何在基于 Mozilla 的浏览器中实现 innerText 属性，如何使用变量表示几何值使它们对所有浏览器
可用，以及当页面在 Internet Explorer 中从右到左显示时如何按照原点的偏移量调整元素的位置。还演示了如何获得多行的树视图列表，
如何为 DIV 元素设置合适的大小，如何支持那些不支持 JavaScript 的浏览器。我希望这些提示会在日常工作中对您有所帮助。
刘周
看不了图！所以把原文地址也帖上！