问题 | 浏览器 | 解决方法 |
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 οnfοcus="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 | 清除浮动 |