網頁製作中十個最好的CSS hacks_經驗交流

如果您是前端編碼員，您必須知道製作跨瀏覽、有效的 CSS 和 xHTML 程式碼有多重要。而且您還必須知道我們在各種瀏覽器的所有這些駭客和修復上花費了多少時間。我之前寫過一些關於 PNG 透明度問題、Web 表單中的黃色字段、垂直對齊 div 等的文章。

這裡列出了 10 個精選的 CSS 黑客和技巧，可以幫助您CSS 代碼，還可以節省一些時間。

1。垂直居中（垂直居中）

http://stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height（最小高度）

選擇器{
min-height:500px;
高度：自動； ！重要
高度：500px；
}

3。 PNG透明度（透明png）

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4。自動清除（自動清除）

.container:after {
content:“.”;
顯示：區塊；
高度：0；
明確：兩者；
可見性：隱藏；
}
.container {display: inline-table;}
/* 從 IE-mac \*/
* html .container {height: 1%;}
.container {顯示：區塊；}
/* 結束從IE-mac 隱藏*/

5.重置CSS（CSS 重設）

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset ,輸入，p，區塊引用，th，td {
邊距：0;填充：0；
}
表格 {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
地址、標題、引用、代碼、dfn、em、strong ,th,var {
字體樣式：正常；字體粗細：正常；
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {字體大小: 100%;}
q:之前，q:之後 {content:」;}

6.滾動渲染 IE（IE 捲軸渲染）

html {
背景：url(null) 固定無重複；
}

7。不透明度(透明度)

#transdiv {
filter:alpha(opacity=75);
-moz-不透明度：.75；
不透明度：.75；
}

8。PRE Tag (標籤預格式)

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla，自 1999 年起*/
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5 */
}

9. Li 背景 重複 IE （LI 標籤背景重複）





10.很高興知道（最好知道的）

@charset“UTF-8”；

/* —————————————————————-
WinIE7
——————————— —— —————————- */
*:first-child html 選擇器{property:value;}

/* ——————————— —— —————————-
WinIE6 & Mac IE
————————————————————————-*/ * html 選擇器{property:value;}

/* ————————————————————————-
WinIE6
—————————————————————- */
/*\*/
* html 選擇器{property:value;}
/ * */

/* ————————————————————————-
MacIE
-------- ------------------------ ———————————————- */
/*\*/ /*/
選擇器{屬性:值;}
/**/