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)