关于CSS细节集合(二)

一、IE6及以下不识别a 标签外的:hover伪类，在火狐，IE7里能正确达到效果，解决办法：

#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}

 

二、为元素设置hasLayout

很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。

三、IE6下字符重复出现

确保浮动元素设置了 display:inline;

在浮动元素中使用 margin-right:-3px;前端UI分享

四、样式优先级

1，内联样式 [1.0.0.0]
2，ID选择器 [0.1.0.0]
3，类，属性，伪类 选择器 [0.0.1.0]
4，元素标签，伪元素 选择器 [0.0.0.1]

五、一个元素垂直居中的css写法

#exm{
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    width:200px;

    height:100px;
    margin-left:-100px;
    margin-top:-52px;
}

 

六、zoom : normal | number

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对象( children )。前端UI分享

七、图片跟文字并排时, 要实现图片文字垂直居中:

1. 将line-height:设置成图片的高度,或者图片父元素的高度.
2. 再将图片的CSS设置vertical-align:middle;

八、li 元素中包含 a img 元素的时候，IE6下出现空白

解决方法 一:

使 li 浮动，并设置 img 为块级元素

解决方法 二:

设置 ul 的 font-size:0;

解决方法 三:

设置 img 的 vertical-align: bottom;

解决方法 四:

设置 img 的 margin-bottom: -5px;

九、被点击访问过的超链接样式不在具有hover和active

解决方法：改变CSS属性的排列顺序: L-V-H-A

十、FF下连续长字段不能自动换行

解决方法：

div{word-wrap:break-word;overflow:hidden;}

 

十一、FF下父容器高度不能自适应

解决办法：清除子元素的浮动

十二、IE下图片下方产生空隙

解决办法：

• 定义img 为display:block，或vertical-align为top/bottom/middle/text-bottom
• 定义父容器的字体大小为零，font-size:0

十三、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙

解决办法：

• 相邻的非浮动元素也设置浮动；
• 浮动元素相对IE6定义_margin-right:-3px;

十四、LI内容超长后以省略号显示

解决办法： white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

十五、文本不能垂直居中

解决办法：行高和容器高度相等line-height=height；

十六、文本输入框和相邻的文本不能对齐

解决办法：设置文本输入框vertical-align:middle;前端UI分享

十七、IE设置滚动条样式

解决办法：

body{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}

 

十八、IE6无法定义高度为1px的容器

解决办法：

div{
overflow:hidden;
zoom:0.8;
line-height:1px;
}