兼容性及经验汇总

1、

浮动时，父级元素无法撑开

解决方案： 全局增加样式

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}

父级元素调用clearfix

使用滤镜PNG图片透明后，容器内链接失效

原因：浮动，注释，宽高定义

解决方案：为容器里面的a加个_position:relative样式

img图片下方出现几个像素间隙

解决方案： img{display:block;}或者img{vertical-align:top;} 在或者 img{font-size:0}

如何让文本垂直对齐文本输入框？

解决方案： input{vertical-align:middle;}

如何让单行文本在容器内垂直居中？

解决方案： 设置文本的行高等于容器的高度。举例：height:25px;line-height:25px;

强制文本溢出一行显示

解决方案： 设置容器的宽度和white-space:nowrap

如何使文本溢出边界显示为省略号

解决方案： 设置容器宽度，设置文本一行显示，溢出截断并显示省略号。例子：

.test {150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

各个浏览器 opacity透明问题

.test {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}

让连续的长字符串自动换行

解决方案： word-wrap:break-word;

去掉超链接的虚线框

解决方案：

a {outline:none;blr:expression(this.onFocus=this.blur());}

网页水平居中

解决方案：

body{text-align:center;} .wp{980px;margin:0 auto;text-align:left;}

如何让table边框1个像素细

解决方案：

table{border-collapse:collapse;}
table th,table td{border:1px solid #ddd;}

网页去色，让网站显示灰色

解决方案：

*{filter:gray; color:gray;}
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

两个相邻块级元素，都设置了margin，间距只有最大一个，间距不会相加。

原因： 这种现象叫：“外边距合并”，两间距相邻取大。 此现象也出现在父子元素。

注意： 浮动元素和绝对定位元素，不会和相邻的元素产生外边距合并；内联块级元素间不会产生外边距合并；根元素间不会产生外边距合并（如html与body间）；设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并。