首頁 > web前端 > css教學 > 網頁製作中十個最好的CSS hacks

網頁製作中十個最好的CSS hacks

高洛峰
發布: 2016-12-24 15:34:41
原創
1266 人瀏覽過

如果您是前端編碼員,您必須知道製作跨瀏覽、有效的 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中文網!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板