兼容性及經驗彙總

一、

浮動時，父級元素沒法撐開

解決方案： 全局增長樣式

.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 {width: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{width: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的塊級元素不會與它的子元素髮生外邊距合併。