一些兼容问题
一些兼容问题,产生的原因以及解决方法
给子元素设置margin-top,结果显示并非为和父元素间隔,而变成父元素设置margin-top
http://blog.chinaunix.net/uid-22414998-id-3138656.html
吐槽ie6那些蛋疼的兼容问题
浮动下沉
div自动撑开
div定了高度,当里面的内容超出的时候,div高度会自动撑开
png24以上不透明
不支持png24透明,解放方法到网上找些插件
浮动双倍边距
因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距 就会出现这种情况。也许你会问:“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动 对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对象的,所以第二个对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline;才能达到预期效果。
不支持块状元素inline-block(ie6,7)
解决方法*display:inline;zoom:1;
ie6有尾巴
看看是否是注释引起的
不支持A以外的伪类
解决方法除了js木有
li里面有块状元素,li与li之间会有间隙
解决方法li 浮动,再清楚浮动
ie6不支持min-height max-height min-width max-width
min设置 min-xxx:xxpx;_xxx:xxpx;就行,ie6会自动撑开
:after等一系列css选择器
不支持
.abc.bcd 这种两个样式连一起不支持
float:right 和float:left碰到一起有些时候,float:right会掉到下一行
解决方法,把float:right的元素提到float:left元素的前面
input:text border:none 无效,必须border:0;
不能设置height:1px;的div
ie默认行高引起,解决方法line-height:1px;或者overflow:hidden,或者font-size:0;
不知道你们试过在ie6下给链接 按钮用css sprites做背景不停闪烁,不用图片预加载的鱼片加载你见过没?ie6不缓存背景图片 有木有
ps:这个lz暂时没有碰到过,是群友提供的
ie6 不能position:fixed
解决方法
消除ie6下的抖动:*html{background-image:url(about:blank);background-attachment:fixed;}
*html{background-image:url(about:blank);background-attachment:fixed;}
.backto-top{ width:35px; height:35px; overflow: hidden; z-index:1;position:fixed;bottom:0;margin-left:964px;*+position:absolute;*+top:expression((document.compatMode?documentElement.scrollTop:document.body.scrollTop) + (document.compatMode?documentElement.offsetHeight:document.body.offsetHeight) - 660 + 'px'); }//660是ie6下距离top的位置。
或者用js
还有ie6的滤镜与超链接的bug
ps:这个lz暂时没有碰到过,是群友提供的
ie6中的line-height在文字和inline-block(img、input、textarea、select、object)元素同时存在的时候,会失效
解决方法:给inline-block元素添加margin: (所属line-height-自身高度)/2px 0; vertical-align:middle
当一个与浮动元素相邻的非浮动元素并没有指定具体的高度或宽度时,非浮动元素中的内容会和浮动元素的边界产生3px的空隙。这个空隙只沿着浮动元素显示,当浮动终止时,文本就恢复正常了。如果非浮动的元素指定了一个具体的宽度或高度,这个时候非浮动元素和浮动元素出现了3px的空隙。
解决方法,给另外一个div也加浮动或者给前面的div加margin-right:-3px;