如果您是前端編碼員,您必須知道製作跨瀏覽、有效的 CSS 和 xHTML 程式碼有多重要。 而且您還必須知道我們在各種瀏覽器的所有這些駭客和修復上花費了多少時間。 我之前寫過一些關於 PNG 透明度問題、Web 表單中的黃色欄位、垂直對齊 div 等的文章。
這裡是 10 個精選的 CSS 駭客和技巧的列表,它們可以幫助您編寫 CSS 程式碼,也可以節省一些時間。
1. 垂直對齊div(垂直居中)
http:/
* html 選擇器{property:value;}
/*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;
明確:兩者;
contain:隱藏; inline-table;}
/* 從IE-mac */
* html .container {height: 1%;}
.container {display: block;}
/*重置CSS(CSS 重設)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote , th,td {
保證金:0; 填充:0;
}
表格 {border-collapse:collapse;border-spacing:0;}
fieldset,img {b):0; ,dfn,em,strong,th,var {
font-樣式:正常;字體粗細:正常;
}
ol,ul {list-style:none;}
caption,th {text-align:left} one;}
caption,th {text-align:left} ; h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:之前,q:之後 {內容:";}
6。 渲染渲染IE(IE 滾動條)
6。 {
background : url(null) 修復不重複;
}
7。透明度:.75;
}
8。 PRE Tag (標籤預格式)
pre {
white-space: 預換行; ; /* Mozilla,1999 年起*/
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */ wrap: break-word; /* Internet Explorer 5.5+ */
}
9. Li 背景重複IE(LI 標籤背景重複)
; leftnav li { zoom: 1;} /* haslayout=true */
;
10. 很高興知道(最好知道的)
@838) 」;
/* ————————————————————————-
WinIE7
———————————————— ———— ———- */
*:first-child+html 選擇器{property:value;}
/* ———————————————————— ————--
WinIE6 和 Mac IE
————————————————————————- */
* html 選擇器{property:value;}
/* ———— —————————————————-
WinIE6
————————————————————— ———- */
/**&*/
/* ———————————————————————-
MacIE
———— ——————— ———————————- */
/**&*/
selector{property:value;}
/**/
更多網頁製作中十個最好的CSS hacks相關文章請關注PHP中文網!