首页 > web前端开发 > 前端开发时需要注意的要点 避免浏览器兼容问题
2013
07-17

前端开发时需要注意的要点 避免浏览器兼容问题

本篇文章主要写给刚步入前端开发行列的新手构架师。

新手前端构架师在书写html代码时由于不太了解xhtml规范,经常会胡乱的使用html标签进行代码嵌套,导致多个浏览器显示不兼容。回过头来又为修改浏览器BUG 使用各种hack进行补救,最终是苦了自己苦了用户。

浏览器的样式BUG实际上是由于每个年代的浏览器解析规则不一样导致,每个年代的浏览器都会带有自己的“小脾气”,这就是为什么自己写出来的一个页面,在不同的浏览器中显示的样式都不尽相同。

本文将会讲述如何在编写代码时如何梳理思路,引导大家使用正确的代码书写规范,告别五花八门的兼容问题。

在了解规范之前,我们要先了解一下浏览器的BUG。由于微软在浏览器领域一直未完全遵循W3C规范,导致IE中的各个版本都会出现不同的样式BUG。在IE中BUG主要多发在IE6中,IE7会出现少量的宽度问题,IE8中的BUG主要集中在滤镜中。由于IE7、IE8的BUG都比较容易解决,因此本文不多阐述。如果需要了解关于IE的常见BUG与解决方法,请查阅博文“IE6中的常见BUG与相应的解决办法”。

一、页面代码的实现顺序与步骤策划

做任何事情都要先做好计划再执行,对于写前端代码也不例外。我们在拿到美工设计的PSD后,需要先对页面结果做好足够的分析。思考页面分为几大块,我应该使用什么样的标签,什么样浮动等等;如何将早期框架搭建起来。

前端开发时需要注意的要点 避免浏览器兼容问题 - 第1张  | 前端开拓者

 

如上图所示;这是一个类似企业网站的模板,第一眼看上去内容非常复杂,但是通过对页面的仔细观察我们可以发现,这个页面是由左侧部分、右侧部分、页面脚部 三块组成。

所以我们第一步需要做的是将页面按照三个区块搭建起来,并确定好左右平行元素的宽度,使其能够在各浏览器中正常的显示。做完这一步,我们就已经为页面的建设打好了基础。

后面我们就需要开始对大块元素中的内容进行进一步区分,观察有几个模块,有没有相同的模块,css样式是否可以复用。在搭建细小模块时需要注意,尽量用块级元素定位,float浮动元素不要与块级元素在同一列中。如果需要在同一列中有平铺的多个元素,请给这些元素都加上float属性,并设置好对应的宽度。

二、了解各标签的属性与内置样式

很多新手并不清楚HTML的各类标签的具体含义。刚开始书写div+css代码时,大量甚至完全使用div进行布局。虽然在CSS中可以修改div的样式属性,但是这样做带来的问题就是代码无法有效进行鉴别,容易造成闭合div的漏写。

因此我们需要仔细阅读html参考手册,了解哪些标签可以直接平铺在同一列中,哪些标签为块级元素,只能一一向下排列,哪些元素不会影响布局的样式等等。

三、牢记浏览器常见BUG的处理方式,在代码第一次编写时就考虑解决兼容问题

其实在第一次编写代码时,就已经可以开始考虑元素的样式是否会引起其他浏览器的兼容问题,防范于未然。

举个常见的例子:IE中float元素如果同时设置了margin值,此时margin的值会变为双倍,解决办法是在该元素中加入display:inline。已知了BUG的解决办法,我们就可以在代码编写时养成一个习惯。比如说我们在为元素添加了float和margin值时,就为这个元素补上一个display:inline 这样就可以有效的避免页面出现双倍边距的BUG。

所以在工作中要不断的记录与总结浏览器BUG的处理方式,并思考其规律与特性,在下一次编写代码时,提前加上相应的兼容性BUG处理的代码。通过不断的经验积累,慢慢的会发现自己所写的代码可以正常的在各浏览器中展现。

四、尽可能的少用,甚至不要使用负数的margin和padding

一般使用负数的margin和padding时,都是由于样式无法按照自己需要的方式移动,才“出此下策”。这么做很可能会给未来的元素样式带来很多奇怪的BUG,使后面的工作更加艰难。

如果遇到确实需要移动到一些元素之外的偏移操作,最好的方法是使用position来对元素进行定位。因为position这个属性定义是建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。因此我们使用position进行一些特殊的定位操作时最为理想的。

五、每一列浮动元素后,都要设置清除浮动

元素进行float操作后,会使元素浮出文档流,使其所在的父级元素无法跟随浮动元素的高度而改变自身高度。所带来的问题就是浮动元素超出了父级元素的包裹范围,若后面跟随有文字、或浮动元素,则会造成布局混乱。

因此我们在每一列的浮动元素代码最后都要进行清除浮动,使整个父级元素能够正常的包裹其内部的浮动元素,避免这些调皮的float元素四处捣乱。

最简单的清除浮动的方法是在最后一个浮动元素的后面加上<div style=”clear:both”></div>

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!