常见的浏览器兼容性问题与解决方案——CSS篇

1、不同的浏览器的标签默认的外补丁和内补丁不同

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

碰到频率:100%

解决方案:初始化CSS的默认样式,*{margin:0;padding:0}。也可以使用其他网站的初始化代码

备注:这个是最常见的也是最容易解决的一个浏览器兼容性问题。

2、块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

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

碰到频率:90%

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

3、设置较小高度标签,在IE6、IE7和遨游浏览器中高度超出自己设置的高度

问题症状:IE6、IE7和遨游浏览器里这个标签的高度不受控制,超出自己设置的高度。

碰到频率:60%

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

4、行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

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

碰到频率:20%

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

5、图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了margin:0;和padding:0也不起作用。

碰到频率:20%

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

6、标签最低高度设置min-height不兼容

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

碰到频率:20%

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

时间: 2024-11-10 14:08:40

常见的浏览器兼容性问题与解决方案——CSS篇的相关文章

常见浏览器兼容性问题与解决方案css篇

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状

前端常见的浏览器兼容性问题及解决方案

常见的兼容性问题: 1.不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同 解决方案: css 里增加通配符 * { margin: 0; padding: 0; } 2.IE6双边距问题:在 IE6中设置了float , 同时又设置margin , 就会出现边距问题 解决方案:设置display:inline; 3.当标签的高度设置小于10px,在IE6.IE7中会超出自己设置的高度 解决方案:超出高度的标签设置overflow:hidden,或者设置line-he

常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器

常见浏览器兼容性问题与解决方案【转】

常见浏览器兼容性问题与解决方案 原文:http://blog.csdn.net/chuyuqing/article/details/37561313/ 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按

初识-常见浏览器兼容性问题与解决方案

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状

CSS 多浏览器兼容性问题及解决方案

css的兼容性也是大家关注的热点.大家一定要注意多测试. Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-

常见的浏览器兼容性问题大汇总

常见的浏览器兼容性问题大汇总 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px: 3 在各个浏览器下img有空隙(原因是:回车.) 解决方法:让图片浮动. 4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度. 解决方法:a 在子标签最后清浮动{<div

常见的浏览器兼容性问题

浏览器兼容性问题一: 不同浏览器的标签默认的外补丁和内补丁不同(margin和padding) 问题症状:随便写几个标签,不加样式控制的情况下,各自的magin和padding差异较大. 解决方案:css里 *{margin:0;padding:0;} 浏览器兼容性问题二: 块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大. 问题症状:常见症状是ie6中后面的一块被顶到下一行 碰到频率:90%(稍微复杂点的页面都会碰到,float布局常见的浏览器兼容问题)

常见的浏览器兼容性问题总结

1.https://blog.csdn.net/zhuwanwanshay/article/details/51882923 (常见的浏览器兼容性问题总结) 2.http://www.jb51.net/article/55193.htm (css与javascript跨浏览器兼容性总结) 3.https://blog.csdn.net/helloxiaoliang/article/details/51362107 (移动页面点击穿透问题解决方案) 4.https://blog.csdn.net/