`
liuting37
  • 浏览: 9697 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

浏览器兼容性问题(内核、IEtester、cssrest、盒模型)

css 
阅读更多

浏览器兼容性问题(内核、IEtester、cssrest、盒模型)

一、浏览器内核

IETrident

火狐:Gecko

Chrome/safriwebkit

OperaPrestoOpera前内核已经被废弃,现在使用Blink

        Blink(googleOpera联合开发高版本用这个)

二、IEtesterbug

经常崩溃

当窗口大小改变的时候,页面内容可能会消失(作者改进中); 上一页/下一页功能不正常; Focus功能不正常; Java apple不能运行; Flash不能在IE6下正常运行。

三、浏览器初始化

 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。    当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。*最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)

四、盒模型

IE8以下的盒模型和W3C盒模型不同之处

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

//IE 在不加<!DOCTYPE html>头的时候会出现问题宽度会不包括padding,(IE11不再有此问题)

五、css遇到的兼容性问题

1 .IE6浮动 margin 产生的双倍距离

解决办法hack

<div style="float:left;width:200px;height:200px;background-color:pink;margin:200px;_margin-left:100px">

这个边距

</div>

或者displayinline

2.当子元素浮动未知高度时,使父容器适应子元素的高度bug
overflow:auto;-------让父容器自适应子元素的高度
_zoom:1;---------为了兼容IE6而使用的CSS Hack

3.图片下方有空隙产生给img元素添加属性:display:block;

4.Floatie6下,存在问题,float 会到下一行,不能和非float在一行内;

5.上一个元素为Float时会影响下一个元素的位置;

解决办法:css hack暴力设置值IE6下的margin-left值;或者将float用非float包起来。或者如果效果是让最下面一行占据一整行,要用clearboth

6.ie6 不显示boderdashed

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics