css IE6兼容

display:inline-block的兼容性

兼容性:

IE6、IE7不识别inline-block但可以触发块元素。

其它主流浏览器均支持inline-block。

解决IE6、IE7兼容性的方法:

1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。

2、直接设置display:inline,使用zoom:1触发layout。

兼容所有浏览器的方法是:

display:inline-block;

*display:inline;

*zoom:1;


解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

哪个需要设置overflow;hidden,生效,就在哪个上面设置position:relative;

双倍margin的解决方法

1)尽量避免使用同样的方向加margin。

2)给所有浮动的元素写上display:inline

双倍margin的bug出现情况很诡异,要考虑到浮动的元素的父级的情况。如果父级也在浮动,可能相同方向的margin和float也能触发双倍margin bug。这时就用display:inline;来解决就行。

、、、、、、

微小盒子的制作,小于14px的盒子必须加上font-size:0px;

竖直方向的margin,高级浏览器不会撑大父盒子,IE6会撑开父盒子;

带有链接的图片,IE会加边框,border:0;

浮动的元素在IE6中是不脱离标准流的,所以不能用浮动制作盒子压盒子;

overflow清除浮动的影响,需要在IE6下加_zoom:1来触发hasLayout渲染机制;

///////////////////

(img有边框、微小盒子font-size:0、半透明不支持png格式、overflow必须加zoom、浮动不脱标3px、双倍margin)

///////////////////////

作为外部wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

给行内样式加样式的时候要先转化成块级元素

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,275评论 1 91
  • 1、盒子中的区域 一个盒子中主要的属性有5个:width、height、padding、border、margin...
    biglemon阅读 352评论 0 1
  • title: css的ie6兼容问题date: 2017-06-13 13:45:13tags: css笔记 pn...
    Gary23阅读 89评论 0 1
  • འོད་ལམ་ལམ་གྱི་ལམ་ཕྲེང་དུ འཛུམ་མུལ་མུལ་གྱི་མི་བུ་དེར རྣམ་ཤ...
    我有一壶酒足以wei风尘阅读 177评论 0 1
  • :列表挑一封吧,我手写给你 虽然字丑,但是我有一颗真诚的心啊[em]e246[/em] 第一封:既见君子,云胡不喜...
    fixated梦_阅读 64评论 0 0
  • 这是一个最好的时代,这是一个最坏的时代。----狄更斯 《指数型组织—打造独角兽公司的11个最强属性》读过以后,我...
    我是Jiatj阅读 500评论 0 0
  • 最近我开始长智齿了,痛得我上跳下串几乎每个晚上都无法睡眠。不过我已经习惯了,因为许多个夜晚都是失眠陪我度过的。两...
    天晴和你吹吹风阅读 180评论 0 5