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

清除浮动