浏览器兼容页面开发注意事项 一、关于 CSS 1.CSS 中的!important 1.CSS 中的!important 属性用法 下面是一段普通的 DIV 代码:

#a{margin-left:30px!important; margin-left:20px;} 在上面的例子中, 层 a 在 IE 浏览器中, 左边距为 20 像素, 而在 Firefox 中, 左边距则变为 30 像素。 这是因为, !important 在 CSS 中表示优先调用, 由于 IE 不能够识别这个属性, 所以在 IE 中, 只能 够调用 “margin-left:20px;" 这个选项, 所以同样的一段代码, 在 Firefox 和 IE 中就会显示不同的 样式。 不过值得注意的是, IE 7.0 以上可以识别 !important, 这个属性了, 但是 IE 6.0 仍然不能识别。 所 以这个小技巧还是相当有用的. 2.头部声明 头部声明 各浏览器兼容必须加次头部声明, 加上了 doctype 声明, 那么所有浏览器都会采用标准 w3c 盒子模型去 解释你的盒子,网页就能在各个浏览器中显示一致了。代码: 或 3. float 闭合 clear:both; 清除浮动 特别是在 firefox 中要注意 清除浮动(特别是在 中要注意) 很多时候部分浏览器会出现以下如图类似的情况,是因为层内应用了浮动(float),但没有清除,使用 clear:both 可对此情况进行处理,如:

TEST DIV

你可以将此部分代码放到一个 HTML 页面看看效果,然后在去掉”

” 看一下效果,就知道这句话的作用了。 如图: (1)有 clear:both 的: (2)无 clear:both 的 4.css 布局中的居中问题 建议使用: #center {margin:0 auto;} 注意:必须有第二点的头部声明,按照 W3C 标准才能生效(针对 IE),且要配合设置使用居中那层的宽度 (eg.width:100%)。 PS:在 IE 中可以直接使用 text-align:center; 但这个 ff 中不生效,所以为了更好的兼容性最好使用 margin:0 auto;。 5. div 设置 padding 后注意 在 FF 下给 div 设置 padding 后会导致 width 和 height 增加 , 但 IE 不会(没有声明头部 W3C 标准 时),此情况可用 !important 解决,或直接在页面头部声明 W3C 标准,可避免出现此情况 。 二、关于 JavaScript 1.关于 1.关于 firefox document.all 大家都知道 document.all 是 ie 在 dom 标准确立之前的一个得到元素的一个集合,根据 id 和 name,的一 个元素大集合, 后来 DOM 标准确定 了, getElementById 逐渐慢慢取代了 all 对象集的地位, 但是 firefox 为了兼容一些为 ie 写的使用 document.all 的脚本,不得已,加入了 document.all 支持,但是也不支持 if(document.all)判断,并且在有正确 xhtml 的 doctype 下会屏蔽使用 document.all 个人建议在 firefox 下尽量避免使用 document.all,以免产生不必要的麻烦。 document.all 在 firefox 下不支持,上网搜索了一下, 用 document.getElementsByTagName("*") 替代 就 OK 了。 getElementsByTagName("*") 可以得到得到所有元素的集合 getElemntById 可以按 id 得到某一元素 getElementsByName 可以得到按 name 属性得到某一元素 getElementById 效果更好啊