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

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

一、被点击访问过的超链接样式不在具有hover和active
解决办法:
改变CSS属性的排列顺序: L-V-H-A

二、FF下连续长字段不能自动换行
解决办法:
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;

九、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的容器
解决办法:
 

overflow:hidden
zoom:0.8
line-height:1px