网页中CSS的细节处理大总结(二)

发布时间:2020-08-09编辑:脚本学堂
我们在css编写过程中遇到很多细节问题,下面针对这个问题,给大家总结归纳一下,细节可以打败一切,希望朋友认真的看一下。

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

#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
<li onMouseOver="this.className='s1'" onMouseOut="this.className='s2'"></li>
 

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

三、IE6下字符重复出现
确保浮动元素设置了 display:inline;
在浮动元素中使用 margin-right:-3px;

四、样式优先级
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 )。

七、图片跟文字并排时, 要实现图片文字垂直居中:
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;