浏览器兼容问题

来源:互联网 发布:javascript的dom对象 编辑:程序博客网 时间:2024/06/10 04:08

一、何为浏览器兼容性问题?

是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。

二、解决方法:

css3特效可以用JS去实现,根据产品的需求,也可以采用这个浏览器动态的,那个浏览器静态的。

IE使用hack解决,hack网址:http://baike.baidu.com/item/css%20hack?fr=aladdin

三、常见的浏览器兼容及解决方案:
1.不同浏览器默认的margin和padding不同
解决方案:在css样式 *{margin:0;padding:0;}
2.图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距
解决方案:使用float属性为img布局
3.ie6下不识别最小/大高度或宽度(min-height等)设置
解决方案:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
4.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
5.ie6下默认有行高
解决方案:overflow:hidden;或设置行高line-height 小于你设置的高度
6.is6中,如果li标签设置宽高度,且li里的标签设置了浮动,那么li之间就会有间距
解决方案:li不设宽、高或者li内的标签不浮动
7.opacity 定义元素的不透明度
解决方案:  filter:alpha(opacity=80);/*ie支持该属性*/
                          opacity:0.8;/*支持css3的浏览器*/
8.DIV浮动IE文本产生3象素的bug
解决方案:

                    
9.高度不能自适应
问题症状:高度不能自适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或padding时。
解决技巧:在p对象上下各加2个空的div对象CSS代码:{height:0px;overflow:hidden;}或者为DIV加上border属性。

10.如何对齐文本与文本输入框
解决技巧:在文本输入框的样式中加上 vertical-align:middle;
11.超链接访问过后hover样式就不出现的问题
问题症状:被点击访问过的超链接样式不在具有hover和active了
解决技巧:改变CSS属性的排列顺序: L-V-H-A(即link->visited->hover->active)

结合这篇http://blog.csdn.net/sinat_27346451/article/details/51469444

0 0
原创粉丝点击