浏览器css兼容问题(css兼容ie)

css浏览器兼容性怎么测试？

一个网页设计的再怎么好看，如果前端排出来的页面兼容性跟不上，那网页在不同浏览器下的表现也不尽相同，可能在IE浏览器下是正常的，但在谷歌浏览器下就错位了。这就是浏览器的兼容性，足以让前端工程师抓狂，因为在前端排版过程中要在不同浏览器下充分测试，相当麻烦。

什么是浏览器兼容性？为什么会存在浏览器兼容性？

我们知道，当下主流的浏览器的背后都是一个个科技类公司，不同公司之间也是存在竞争的，所以每个浏览器厂家都会对自家的浏览器定制化一些功能。也就是因为不同浏览器是由不同厂家开发的，不同版本的浏览器功能也存在差异，所以就衍生出了浏览器兼容性问题。

所春兄谓的浏览器兼容性是指不同浏览器对网页的渲染模式存在差异，比如同样一段HTML和CSS代码，在不同浏览器上解析渲染出来的效果是不同的，比如说：A浏览器默认字体行高大一些，B浏览器默认字体行高小一些等。

常见的浏览器内核

虽然市面上的浏览器很多，但常见的浏览器内核主要有这几款：

1、Trident内核（IE内核）

IE浏览器使用的是Trident内核，像国内互联网公司推出的一些浏览器（360浏览器、百度浏览器、QQ浏览器、猎豹浏览器等）也使用了Trident内核（国内这些浏览器基本上都是双内核，即：IE内核+Webkit内核）。

2、Webkit内核

像Chrome（谷歌）浏览器、Safari（苹果）浏览器使用的是Webkit内核。

3、Gecko内核（火狐内核）

Firefox（火狐）浏览器使用的是Gecko内核，只不过火狐浏览器现在用得不多了。

浏览器兼容性怎么测试？

市面上的主流浏览器那么多，当我们排好一个页面后总不能下载10几个浏览器一一测试吧！其实现在的前端兼容性测试比以前的前端兼容扒弊袭性测试要轻松多了，因为：

现在我们只需要对常见的三四种内核的浏览器进行测卜哪试；

IE低版本不再考虑，以前要考虑IE6、IE7、IE8、IE9等不同版本的兼容性；

手机Wap端页面主要在Webkit内核浏览器下测试即可。

所以前端同学在测兼容性时，主要使用：IE10浏览器、Chrome浏览器进行测试即可。如果非要考虑低版本的IE兼容性，可使用IETester这类工具，另外在浏览器调试模式下可以直接指定IE内核。

浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同问题症状：誉扒随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。碰到频率:100%解决方案：CSS里加一行1*{margin:0;padding:0;}备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大问题症状:常见症状是IE6中庆激昌后面的一块被顶到下一行碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）解决方案：在float的标签样式控制中加入display:inline;将其转化为行内属性备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用divfloat实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。浏览器兼容问题三：设置较小高度铅兆标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度碰到频率：60%解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug问题症状：IE6里的间距比超过设置的间距碰到几率：20%解决方案：在display:block;后面加入display:inline;display:table;备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。浏览器兼容问题五：图片默认有间距问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。碰到几率：20%解决方案：使用float属性为img布局备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）浏览器兼容问题六：标签最低高度设置min-height不兼容问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容碰到几率：5%解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px;height:auto!important;height:200px;overflow:visible;}备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。浏览器兼容问题七：各种特殊样式的兼容，比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决。JS解决IE6下png透明失效的问题做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。