css 问题集 来源网络或者自我探索
①
ie6 flaot 双边距问题 display:inline;每个浮动元素
②
ie8 没有ul时候,li总会有padding;
③
ie6 div 上下有间隙 overflow:hidden; margin-top:-6px
④
font 写在line-height之前才能上下居中
⑤ 假传圣旨 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。
⑥ 在固定宽度的div中,如果出现一长串没有空格的字母,且长度超过div的设定宽度,此时浏览器会把这一长串字母当作一个单词,默认为单行显示,或者撑开外部容器或者超越外部容器
IE下的解决方法:word-break:break-all; 不过只能在IE下使用...FF下不行...
⑦解决IE6下png透明失效的问题。 .png{ _background: url(http://www.snowangel.cn/images/angel.png) no-repeat !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="http://www.snowangel.cn/images/angel.png"); background:none; width:118px;height:133px; } .png div{position:relative;}
⑧div的垂直水平居中
position属性药设置成absolute,left和top是50%,margin-left和margin-top必须要是负的高与宽的一半
#warp { position:absolute; width:500px; height:200px; left:50%; top:50%; margin-left:-250px; margin-top:-100px; }
⑨css3的圆角 ie9 以及 火狐 谷歌 沙发瑞 border-radius:5px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px
⑩阴影效果 filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4); -moz-box-shadow: 2px 2px 10px#909090; -webkit-box-shadow: 2px 2px10px #909090; box-shadow:2px 2px 10px#909090;
(11)要文字与下划线的距离拉大一点 不能直接用text-decoration:underline;要用text-decoration:none;以border-bottom作为下划线然后用padding-bottom调节!
(12)字间距 letter-spacing
(13)表单控件与文字不对其 字体大小变大或变小一个像素,表单加上padding:0;vertical-align:middle;
(14)透明度 opacity: .3;filter:Alpha(Opacity=30)