创新互联长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为赞皇企业提供专业的成都网站建设、成都网站制作，赞皇网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

本文目录一览

• 1，经常遇到的css的兼容性有哪些
• 2，css产生浏览器兼容性问题的原因是什么
• 3，divcss浏览器兼容性问题
• 4，常见的css浏览器兼容性问题有哪些如何解决
• 5，html常见兼容性问题有哪些

1，经常遇到的css的兼容性有哪些

自适应，表单宽高度不一致，单选框、复选框、下拉框风格不统一，滚动条效果不同，清楚浮动问题等等！

其实也就是 ie8 以及之前的版本 与谷歌的 差异 一般就是图片透明 圆角 字体大小 包括一些新出的 css3 样式 这些在ie8 都无法直接兼容

2，css产生浏览器兼容性问题的原因是什么

IE内核的浏览器一般不会冲突你知道吧，因为网站大都以IE内核为标准，BTW，先了解一下内核（负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页，http://baike.baidu.com/view/1369399.htm）这样，如果网页都是一个标准的话，也不会有这种问题，关键是微软把自己当成了标准，不遵循网页的规范，所以一些网页即使语法错误也会在IE正常显示，而在FF，谷歌浏览器不同内核的浏览器中出现“兼容”问题，其实是网页不遵循Web标准还有一种兼容问题：比如网上银行和QQ秀主页，有些非主流浏览器就不能正常浏览，因为有些插件只是针对IE浏览器开发的！！！

3，divcss浏览器兼容性问题

这种情况通常 是由于没有清除浮动造成的。可能是你图片上面那一个DIV里面的内容使用了float:left 或 float:right 或者都有使用。这时候是需要清除浮动的。建议在图片所在的DIV上面加上这样一段来清除：div这样就可以清除左右浮动，应该可以表现正常了。

当然要兼容,但现在不比几年前了,ie5还很多,现在完全可以不用理ie5了,ie5那才叫麻烦, ie6,7,8,火狐,op等基本上解析差不多,就是ie6有时会麻烦一点,双倍边距,三像素等问题,但也很容易解决,如果做出来实在有问题就用csshack吧,下面是ie,6,7,8,ff的通用csshack border:2px solid #00f; /*ff的属性*/ border:2px solid #090\9; /* ie6/7/8的属性 */ border:2px solid #f90\0; /* ie8支持 */ _border:2px solid #f00; /*ie6的属性*/ 一般你在ie,火狐下测试通过没问题,其它浏览器应该也不会有太大的问题

360两个模式是两种内核，懂不。兼容模式是穿ie内核的马甲，当你切换到高速模式时，解析css的是另一个浏览器内核了内核不同，你css代码本身写得不到位或是常见兼容问题没处理好，就会出现你的问题

这种情况多半都是因为你的元素没有设置margin或者padding的具体值或者没有float或者没有float清零造成的。总的来说就是没有规范的写代码。写样式时，多注意各浏览器的内核兼容问题。一般情况下firefox/chrome/IE正常的话，就能正常显示。

4，常见的css浏览器兼容性问题有哪些如何解决

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

5，html常见兼容性问题有哪些

1.当加了doctype 标签的alt属性在ie8或以上不生效，所以推荐使用title属性。
2.什么情况下使用id选择器或class选择器id选择器复用性比较低，优先级比较高，唯一使用，所以如果某个样式只是给某一个html元素使用，则选择id选择器，如果一个样式可能给多个html元素使用，则应当使用class选择器。
3.a:link 在ie5,6下无效可以直接使用a4.IETest工具，也有一个兼容性问题，在win7下，打不开ie6。可以下载绿色版的ie6,不用安装直接用的那种。
5.在嵌套div中，如果外层div没有设置边框，内层div的margin-top会无效。

1.当加了doctype 标签的alt属性在ie8或以上不生效，所以推荐使用title属性。
2.什么情况下使用id选择器或class选择器id选择器复用性比较低，优先级比较高，唯一使用，所以如果某个样式只是给某一个html元素使用，则选择id选择器，如果一个样式可能给多个html元素使用，则应当使用class选择器。
3.a:link 在ie5,6下无效可以直接使用a4.IETest工具，也有一个兼容性问题，在win7下，打不开ie6。可以下载绿色版的ie6,不用安装直接用的那种。
5.在嵌套div中，如果外层div没有设置边框，内层div的margin-top会无效。

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

分享文章：都知道哪些css浏览器兼容性问题，经常遇到的css的兼容性有哪些
本文来源：http://kswjz.com/article/ejppoe.html