css兼容性问题总结
|
问题 |
浏览器 |
解决方法 |
|
body{overflow:hidden;}没有去掉滚动条 |
IE6/7 |
设置html{overflow:hidden;} |
|
form>[hasLayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-left |
IE6/7 |
form > [hasLayout 元素]{margin-left:宽度;} |
|
当子元素有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; } |
|
|
Ie6 |
a:hover{ a:hover span{ |
|
|
Ie8 |
给父元素加z-index：1 |
|
|
Ie6 |
老的dx引擎，都是local渲染，超过的部分是没办法显示的。可以考虑用图片做这种东西 |
|
!important |
Ie6 |
分开写： #test { text-decoration:underline !important; } #test { text-decoration:none; } |
|
设置多个元素的 background-attachment:fixed;后只有最地层的才有效 |
Ie6 |
ie6下最地层的attachment fixed 才起作用 暂无找到解决办法 |
|
绝对定位元素和浮动元素相邻时，元素消失 |
Ie6 |
清除浮动 |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
