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

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

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

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

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

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

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

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

 

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

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

后面我们就需要开始对大块元素中的内容进行进一步区分，观察有几个模块，有没有相同的模块，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>