常见浏览器兼容问题
2016-01-19 16:22
183 查看
参考文章:
http://wenku.baidu.com/link?url=jVvQq3_ZXTSxHWhwEhdtK_7-xbjrLUjJmXY4nH8_eNFPG5qugaRdyjjDGYdoRRhiW1MP1cdDt6U97KmPNE3a1LrT6FPPojyqfGxe2eRPK6W
/article/4893015.html
http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html
IE浏览器和谷歌浏览器设置相同的样式,但是标签的位置不一致的时候:
设置 display:inline;height:10px;float:left;
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:CSS里 *{margin:0;padding:0;}
浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
问题症状:IE6里的间距比超过设置的间距
解决方案:在display:block;后面加入display:inline;display:table;
备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五:图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加padding:0px;margin:0px;也不起作用。
解决方案:使用float属性为img布局
备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距
浏览器兼容问题六:标签最低高度设置min-height不兼容
问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七:子标签撑不开父标签的高度
问题症状:一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。
解决方案:1. 在子标签最后清浮动{<div style="height:0;clear:both;"> </div>}
2. 父标签添加{overflow:hidden;}
3. 给父标签设置高度
浏览器兼容问题八:li之间有间距
解决方案:li 设置vertical-align:middle;
浏览器兼容问题九:opacity 定义元素的不透明度
解决方案: filter:alpha(opacity=80);/*ie支持该属性*/
opacity:0.8;/*支持css3的浏览器*/
http://wenku.baidu.com/link?url=jVvQq3_ZXTSxHWhwEhdtK_7-xbjrLUjJmXY4nH8_eNFPG5qugaRdyjjDGYdoRRhiW1MP1cdDt6U97KmPNE3a1LrT6FPPojyqfGxe2eRPK6W
/article/4893015.html
http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html
IE浏览器和谷歌浏览器设置相同的样式,但是标签的位置不一致的时候:
设置 display:inline;height:10px;float:left;
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:CSS里 *{margin:0;padding:0;}
浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
问题症状:IE6里的间距比超过设置的间距
解决方案:在display:block;后面加入display:inline;display:table;
备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五:图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加padding:0px;margin:0px;也不起作用。
解决方案:使用float属性为img布局
备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距
浏览器兼容问题六:标签最低高度设置min-height不兼容
问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七:子标签撑不开父标签的高度
问题症状:一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。
解决方案:1. 在子标签最后清浮动{<div style="height:0;clear:both;"> </div>}
2. 父标签添加{overflow:hidden;}
3. 给父标签设置高度
浏览器兼容问题八:li之间有间距
解决方案:li 设置vertical-align:middle;
浏览器兼容问题九:opacity 定义元素的不透明度
解决方案: filter:alpha(opacity=80);/*ie支持该属性*/
opacity:0.8;/*支持css3的浏览器*/
相关文章推荐
- HDU4391(线段树+剪枝)
- 移动端弹窗、移动端手机网站弹出框、手机网站弹窗特效!
- 关于Android Canvas.drawText方法中的坐标参数的正确解释
- 友盟分享错误记录
- 优化mysql实验(explain;索引)+利用 index、explain和profile优化mysql数据库查询小结
- 数据库编码格式utf8
- Python字典 (dict)
- linux查看进程情况的命令
- 创建一个新项目
- [转]阿里云 Linux 安装phpredis扩展 How to install Redis and Redis php client
- XML编程-SAX
- 大数据量导出身份证出错解决办法
- MFC使用控制台界面
- Oracle数据块损坏篇之10231内部事件
- JavaScript学习 五、面向对象
- 文本文档批量导成表格
- 创建模式
- java入门学习(12)—内部类的定义及使用初步
- 网页分析摘记
- 刮奖的实现;(刮开上层图层蒙版,露出底部的视图)