前端开发人员如何应对浏览器兼容性问题？你属于哪一类？

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。（相关文章推荐：主流浏览器CSS 3和HTML 5兼容清单）

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的 和差异较大。

碰到频率:100%

解决方案：CSS里 *{:0;:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的情况下，在IE6显示比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 :;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置:;或者设置行高line- 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置:block后采用float布局，又有横行的的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在:block;后面加入:;:table;

备注：行内属性标签，为了设置宽高，我们需要设置:block;(除了input标签比较特殊)。在用float布局并有横向的后，在IE6下，他就具有了块属性float后的横向的bug。不过因为它本身就是行内属性标签，所以我们再加上:的话，它的高宽就不可设了。这时候我们还需要在:后面加入:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负，虽然能解决，但负本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-不兼容

问题症状：因为min-本身就是一个不兼容的CSS属性，所以设置min-时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-:200px; :auto !; :200px; :;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/ 我很少使用的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过还是非常好用的。使用我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 ff opera等）

IE6认识的 是下划线_ 和星号 *

IE7 遨游认识的是星号 *

比如这样一个CSS设置：

:300px;*:200px;:100px; IE6浏览器在读到:300px的时候会认为高时300px；继续往下读，他也认识*， 所以当IE6读到*:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*的时候就停下了，因为它们不认识。所以它们会把高度解析为200px，剩下的浏览器只认识第一个:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

演示地址：CSS Demo

本文两种实现方式: 使用或不使用 和 :after 伪元素(伪类,-)

最近重新设计了我的网站，准备添加提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。

当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。

幸运的是, 的核心开发者 介绍了一个强大的技巧给我：CSS三角形.只使用纯CSS语言，你就能创建兼容各个浏览器的三角形，用很少的代码。

不使用伪类的 CSS 代码如下:

/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */

div.arrow-up {

width: 0;

: 0;

-left: 5px solid ; /* 左边框的宽 */

-right: 5px solid ; /* 右边框的宽 */

-: 5px solid #; /* 下边框的长度|高,以及背景色 */

font-size: 0;

line-: 0;}

/* 向下的箭头 类似于 V */

div.arrow-down {

width: 0;

: 0;

-left: 20px solid ;

-right: 20px solid ;

-top: 20px solid #f00;

font-size: 0;

line-: 0;

/* 向左的箭头: 只有三个边：上、下、右。而 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 */

div.arrow-right {

width: 0;

: 0;

-: 15px solid ; /* 下边框的高 */

-top: 15px solid ; /* 上方边框的高 */

-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */

font-size: 0;

line-: 0;

其中的秘密，就是这些三角形在你要指向的方向垂直的两边, 有巨大的边框,而让背面的边框设置为你喜欢的颜色即可。

边框越大，三角形就越大。调整三个边框的长度，就可以构建出各种不同的三角形。如果加上旋转，不知道似的否可以指定各种不同方向的图形?

当然，这个处理方法优越的地方就在于代码量非常少，同时非常灵活。

带有 : 和 :after 的CSS三角形

前面的例子可以很好的工作，但是如果你想要不只是一个三角形怎么办？比如气泡对话框，那么可以使用伪类来实现CSS三角形箭头，对于弹出的提示信息来说非常完美，代码如下：

div. {

/* in here; to do with */

/* with and after */

div.:, div.:after {

: ' ';

: 0;

: ;

width: 0;

: 10px solid ; /* arrow size */

/* 向上的箭头 */

/* top-, arrow */

div.: {

--color: #fff; /* arrow color */

/* */

: ;

top: -19px;

left: 255px;

z-index: 2;

/* arrow which acts as a */

div.:after {

--color: #333; /* arrow color */

/* */

: ;

top: -24px;

left: 255px;

z-index: 1;

一般来说在箭头的背面边框指定颜色，也可以只使用 : 或者 :after 之中的一个。而第二个箭头，可以被当作背景边框，或者作为第一个的阴影。

我想问自己为什么不早点知道这种技术。这个优雅的技巧肯定会让我在将来大大的提高制作元素的水平，同时也为我打开了一个广阔的视野。

完整的页面示例代码如下：

CSS 箭头Demo

以下代码.是极好的纯 CSS 箭头样式，不使用背景图!

CSS 箭头气泡 ，使用 伪类(-)

企业级开发首选技术是什么？和.Net哪个技术更好？在开发中主要用哪些框架？另外在移动大热的趋势下如何开发出一个成功的产品？

向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度

向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度

向上的箭头,类似于A,只有三个边，不能指定上边框

摘要：使图片相对于上层DIV始终水平、垂直都居中.{width:260px;:260px;text-align:cen...

使图片相对于上层DIV始终水平、垂直都居中

示例一

示例二

浏览器 问题 设置 标签 边框 高度