WEB开发：跨浏览器兼容性解决方案总结

需积分: 50 105 浏览量更新于2024-07-29 收藏 714KB PDF 举报

"跨浏览器开发经验总结" 在Web开发中，跨浏览器兼容性是一个至关重要的问题，因为不同的浏览器对HTML、CSS以及JavaScript的支持存在差异。本文档总结了开发者在处理跨浏览器开发时需要注意的一些关键点。 1. HTML标记 - DOCTYPE声明：确保每个页面都添加正确的DOCTYPE声明，如`<!DOCTYPE html>`，以启用标准模式，避免浏览器的怪异模式。 - 标签使用：推荐使用div+css布局，避免使用table进行布局，以提高灵活性和可维护性。 - 标签闭合：确保所有标签正确闭合，特别是在form标签内嵌套其他元素时。 - tbody元素：在定义table时，使用<tbody>元素来规范结构，保证所有浏览器能正确解析。 - 属性大小写：注意HTML标签及属性名称的大小写，保持一致以确保兼容性。 - 属性值设置：如<script>的type属性应设为"text/javascript"，<a>的alt和title属性用于辅助功能，<input>的checked和readonly属性控制用户交互，<option>的selected属性指定默认选中项，<img>的align属性在某些浏览器中可能不被支持，<iframe>的frameborder属性控制边框，<table>的cellpadding属性影响单元格间距，<td>的nowrap属性防止文本换行。 2. CSS - CSS Hack：有时需要针对特定浏览器使用特定的CSS规则，如类级别的hack（_float属性针对IE6）和属性级别的hack（*width针对IE7）。 - 代码片段级别的hack：某些CSS规则仅IE识别，如条件注释。 - 脚本设置CSS：通过JavaScript动态设置元素的style样式或class属性，实现动态效果。 - 具体CSS效果：例如，使用`:hover`伪类让按钮在鼠标悬停时显示手形光标，处理不同浏览器的滚动条样式，使用line-height属性调整行高，利用display:inline-block使元素既能内联又能块级显示，解决div中的文字换行问题，以及textarea内的自动换行。 3. 警惕“IE依赖综合症” - DHTML：避免过度依赖IE特有的DOM对象，如document.all，而应该使用W3C标准的getElementById等方法。 - DOM属性：如element.innerText、element.outerHTML等，在非IE浏览器中可能不适用，应使用通用方法如innerHTML。 - 表单操作：尽量避免直接使用document.forms.actionForm.inputName.value，而应使用DOM遍历和查询找到元素并获取其值。 4. Table操作 - 在处理表格时，避免使用如moveRow()这样的IE特有方法，转而使用DOM操作来实现跨浏览器的表格操作。 5. 写入剪贴板 - 不同浏览器对剪贴板的支持不同，IE和Firefox允许JavaScript写入剪贴板，但Opera和Safari可能需要其他解决方案。跨浏览器开发是一个持续挑战的过程，需要开发者时刻关注最新的浏览器兼容性信息，并采取适当的策略来确保应用在各种环境中都能正常工作。通过遵循这些经验和技巧，可以显著减少开发和维护中的困扰，提高Web应用的用户体验。

即使 table 没有显示定义 tbody 元素,浏览器也会认为 tr 节点的父节点是一个自动添加的默认 tbody 节点.

为了避免使用 javascript 操纵 tr 节点时可能产生的误会, 还是手动添加一个比较好，如：

<tr>

<td>

</td>

</tr>

</tbody>

</table>

注意标签及属性的大小写

有的时候，有些绑定在元素上的事件在 IE 浏览器下响应，在 safari 或其他浏览器下却不响应。这时候需

要检查事件绑定方式的正确性，高级事件的绑定需要区别 IE 和其他浏览器写两套 javascript，而简单事

件模型需要注意一下绑定事件名的大小写。如：

这里应该用小写的 onfocus，并且显示的添加标签闭合符号才是规范的写法。

 注意标签的属性值设置

览器（主要是 IE）使用 1.2 版本的 javascript 语法来解释；而 type 属性才是用来定义脚本类型的，是 w

3c 的标准属性，并且使用小写属性才是符合标准的做法。如果不是特别情况下需要告诉浏览器按照较低版

本的 javascrip 语言进行解释的话（目前大多数浏览器支持的 javascript 版本是 1.5），一般不需要定义

language 属性，但是 type 属性是需要定义的。所以应该把代码中的

<a>标签的 alt 和 title 属性

虽然 alt 和 title 这两个属性的值在 IE 下都会以 tool tip 的方式在鼠标悬停时显示，但是二者还是有区别

的。alt 是图片没有显示出来的时候的替代显示，而 title 才是鼠标放到上面时的提示。

<input>标签的 checked、readonly 属性

剩余18页未读，继续阅读

牛魔王_1

粉丝: 178

WEB开发：跨浏览器兼容性解决方案总结

BabelExt跨浏览器扩展开发库现已过时

JAGAX：无插件的跨浏览器交互设计引擎

嵌入式浏览器开发技术探析：从Netbit到Gzilla

跨浏览器开发经验总结（二） CSS

跨浏览器开发经验总结（一） HTML标记

javascript 跨浏览器开发经验总结（五） js 事件

跨浏览器开发经验总结（四） 怎么写入剪贴板

跨浏览器开发经验总结（三） 警惕“IE依赖综合症”

(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享

用于跨浏览器网页编程

最新资源

跨浏览器开发经验总结（四）怎么写入剪贴板

跨浏览器开发经验总结（三）警惕“IE依赖综合症”