css兼容性问题总结

 

 

 

 

问题	浏览器	解决方法
body{overflow:hidden;}没有去掉滚动条	IE6/7	设置html{overflow:hidden;}
form>[hasLayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-left	IE6/7	form > [hasLayout 元素]{margin-left:宽度;} form div{*margin-left:宽度÷2;}
当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置了 position:visible;(溢出不隐藏)	IE6/7	给父元素设置position:relative;
th 不会自动继承上级元素的 text-align	IE8	给th添加text-align:inherit;
:hover 时若background-color为#fff, 失效	IE7	把background-color改成background。或者，非#fff || #ffffff
Position:absolute元素中，a display:block, 在:hover时只有文本可点击,当没有文本时 不可点击	IE6/7	给a添加background, 如果背景透明，使用background:url(‘任何页面中已经缓存的文件链接’)，不推荐background：url(#)[官方的解决方法]，因为会增加一下HTTP请求
dt, dd, li 背景失效	IE6	dt, dd, li{position:relative;}
使用filter处理的透明背景图片的透明部分不可点	IE6-8	把background:none变成background:url(‘链接’)，链接到本身和图片之外的任何文件
li内元素偏离 baseline 向下拉	IE8	给li设置display:inline 或 float:[方向]
列表中li的list-style不显示	IE6/7	给li添加margin-left，留空间来显示（不要加在ul上）
背景溢出，拖动滚动条后显示正常	IE6	给父元素添加overflow:hidden防止溢出，并赋予hasLayout,如果添加_zoom:1;
高度超过height定义的高	IE6	添加_overflow:hidden;(推荐)或者_font-size:0;
宽度超过width定义的宽	IE6	添加_overflow:hidden;
双倍边距	IE6	添加display:inline到float元素中
margin负值隐藏：hasLayout的父元素内的非hasLayout元素，使用负边距时，超出父元素部分不可见	IE6/7	去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;
给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面	IE6	给有斜体文字的元素添加overflow:hidden;
3px 间隔：在float元素后的固定宽度元素，会有3px间隔	IE6	因为是确切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px;
text-align 影响块级元素	IE6/7	整理你的float；或者分开设置text-align
浮动元素无法撑开父元素	Ie/ff	FF/ie6以上:overflow:hidden Ie6:zoom:1;
A加了png背景后连接失效 常用于logo的链接	Ie6	给logo加个父div 把png放到div的bj中 然后给a加position:relative;
在做水平导航时li的width:auto; a链接的width:auto; Ie6下width为一整行	Ie6	_width:0; white-space:nowrap ;
Table/tr设置display:block;时内容挤到一块了	Ff/chrome	一定要设的时候可以这样display:;
min-height:500px;	Ie6	IE6不支持min-height属性。给ie6加_height:500px;切记不能给加overflow:hidden;属性哦。IE6里面，如果内容超出了height指定的高度,则容器会被撑大。
文本自动适用宽度		word-wrap:break-word; overflow:hidden;
Ie6 png	Ie6	_background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/liuyan_07.png', sizingMethod='crop'); crop:剪切图片以适应对象尺寸。 image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale:缩放图片以适应对象的尺寸边界。
单行超出宽度省略号显示		overflow:hidden;text-overflow:ellipsis;white-space:nowrap; word-wrap:normal; (在 ie下设置了word-wrap:break-word; 强制换行会失去作用；需要重置：word-wrap:normal;)
flash背景透明		wmode    transparent
鼠标表单聚焦清空		<textarea onfocus="this.value=''" >输入您要发表的内容....</textarea>
火狐文本域无法固定大小	ff	resize: none;
手型样式		cursor:pointer;  cursor:default;
字符间距		letter-spacing:1em;
display:inline-block;	Ie6/7	修改block元素的display属性为inline-block后，IE6/7及以下的老版浏览器都是不支持的 display:inline-block; zoom:1; *display:inline;
opacity:0.3;filter:alpha(opacity:40);在ie下不起作用	Ie6、7	因为haslayout的原因，为了触发haslayout属性，更简单的办法就是它设置zoom:1;即可，而且没有任何副作用。 .opacity{opacity:0.3;filter:alpha(opacity:40);zoom:1}
Table{border:1px;} Ie8下没有边框	Ie8	Ie8需要给设置td｛border:1px｝
position:fixed;top:300px;	Ie6	_position: absolute;                                      _top: expression(documentElement.scrollTop + 300 + "px"); body {  _background-image: url(about:blank);      _background-attachment: fixed;     }
a:hover span{     color:#red; }无效	Ie6	a:hover{     border:none; } a:hover span{     color:#red; } 或者background:none;
父元素的filter:alpha(opacity=50);绝对定位的子元素无法继承	Ie8	给父元素加z-index：1
父元素加了个filter滤镜渐变背景后，里面的子元素用绝对定位超出盒子，就被隐藏了？	Ie6	老的dx引擎，都是local渲染，超过的部分是没办法显示的。可以考虑用图片做这种东西
!important	Ie6	分开写： #test { text-decoration:underline !important; } #test { text-decoration:none; }
设置多个元素的 background-attachment:fixed;后只有最地层的才有效	Ie6	ie6下最地层的attachment fixed 才起作用 暂无找到解决办法
绝对定位元素和浮动元素相邻时，元素消失	Ie6	清除浮动