常见几种浏览器兼容问题
2015-07-26 22:06
211 查看
最常见的几种兼容问题:
1.不同浏览器的标签默认的外补丁和内补丁不同
在各个浏览器中,不加样式的情况下,各自的margin和padding差异较大。
解决方法:在CSS中写*{margin:0px;padding:0px}
2.子元素绑架父元素的margin-top
在非IE浏览器中,如果父元素与子元素之间没有任何内容,在设置子元素的margin-top的时候,经常会出现父元素随着子元素一起动。
解决办法可以有2个,一个是在父元素与子元素之间加入一个占位行,<div stye=‘height:0’> </div>;还有一个办法是设置父元素的内上边距值(padding-top).
3.块级标签float后要设置横向的margin值
在IE6浏览器中,设置的横向margin值会加倍
解决办法就是将块级标签设置为行级标签,display:inline.
4.设置有最小宽度、高度,最大宽度、高度时。
在IE6浏览器中,不支持以上所说的属性。
解决办法:div{width:200px;height:200px;_width:200px;_height:200px},该方法是利用了IE6的一个特征,当定义一个高度时,如果内容超过高度,元素会自动调整高度。
5.设置元素的透明度。
在IE浏览器中支持filter:alpha(opacity=80);
非IE浏览器支持opacity:0.8;
下面是IE678版本的hack:
.header {_width:100px;} /* IE6专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8*/
.header {width:100px\9;} /* IE6、IE7、IE8共用*/
*+html .header{} /*IE7*/
在IE6中!important的特殊用法:
ie6中,同一个大括号里对同一个样式属性定义,其中一个加!important 则!important标记是被忽略的。
例:{background:red!important; background:green;} 。ie6下解释为背景色green,其它浏览器解释为背景色red;
如果这同一个样式在不同大括号里定义,其中一个加important 则!important发挥正常用。
例:div{background:red!important} div{background:green},这时所有浏览器统一解释背景色red。
1.不同浏览器的标签默认的外补丁和内补丁不同
在各个浏览器中,不加样式的情况下,各自的margin和padding差异较大。
解决方法:在CSS中写*{margin:0px;padding:0px}
2.子元素绑架父元素的margin-top
在非IE浏览器中,如果父元素与子元素之间没有任何内容,在设置子元素的margin-top的时候,经常会出现父元素随着子元素一起动。
解决办法可以有2个,一个是在父元素与子元素之间加入一个占位行,<div stye=‘height:0’> </div>;还有一个办法是设置父元素的内上边距值(padding-top).
3.块级标签float后要设置横向的margin值
在IE6浏览器中,设置的横向margin值会加倍
解决办法就是将块级标签设置为行级标签,display:inline.
4.设置有最小宽度、高度,最大宽度、高度时。
在IE6浏览器中,不支持以上所说的属性。
解决办法:div{width:200px;height:200px;_width:200px;_height:200px},该方法是利用了IE6的一个特征,当定义一个高度时,如果内容超过高度,元素会自动调整高度。
5.设置元素的透明度。
在IE浏览器中支持filter:alpha(opacity=80);
非IE浏览器支持opacity:0.8;
下面是IE678版本的hack:
.header {_width:100px;} /* IE6专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8*/
.header {width:100px\9;} /* IE6、IE7、IE8共用*/
*+html .header{} /*IE7*/
在IE6中!important的特殊用法:
ie6中,同一个大括号里对同一个样式属性定义,其中一个加!important 则!important标记是被忽略的。
例:{background:red!important; background:green;} 。ie6下解释为背景色green,其它浏览器解释为背景色red;
如果这同一个样式在不同大括号里定义,其中一个加important 则!important发挥正常用。
例:div{background:red!important} div{background:green},这时所有浏览器统一解释背景色red。
相关文章推荐
- Linux下安装Redis
- 设计模式 (7) - Flyweight/享元模式
- No3.Longest Substring Without Repeating Characters
- Android 开源框架Universal-Image-Loader完全解析(二)--- 图片缓存策略详解
- android之我自己实现的下拉刷新
- BZOJ 1592: [Usaco2008 Feb]Making the Grade 路面修整( dp )
- QDemo - Analog clock模拟时钟学习并改进
- Linux 下编译安装 PHP 5.6
- 偶数支足球队进行单循环比赛,按照指定算法打印每轮的对阵形势
- XAMPP重要文件目录及配置
- LAMP环境搭建教程
- phaser制作跑酷游戏
- Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用
- Android之——自动挂断电话的实现
- poj Map Labeler 【2-sat + 二分】【最后一道2-sat 1A好开心】
- 最小公倍数 SRM 661 Div1 250: MissingLCM
- EasyUI总结
- 设计模式之六大原则(转载)
- Java NIO:浅析I/O模型
- MIUI 7 会是小米的救命稻草吗?