Web制作のためのベストCSSハック10選

あなたがフロントエンドコーダーであれば、クロスブラウズ、有効な CSS コード、xHTML コードを作成することがいかに重要であるかを知っている必要があります。 また、さまざまなブラウザのハッキングや修正にどれだけの時間が費やされているかも知っておく必要があります。 その一部については、以前に PNG の透明性の問題、Web フォームの黄色のフィールド、垂直方向の配置 div などについて書きました。

ここでは、CSS コードや時間を節約します。 

1. 垂直 align div (垂直居中)

http:/
* html セレクター{プロパティ:値;}
/*stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height (最小高さ)

セレクター {
min-height:500px; 
高さ:自動; !重要
高さ:500ピクセル; 
}

3. PNG 透明度 (透明png)

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

4. Autoclear (自動清除)

.container:after {
content: “.”; 
表示: ブロック; 
身長: 0; 
クリア: 両方。 
可視性: 非表示。 
}
.container {display: inline-table;}
/* Hide from IE-mac */
* html .container {height: 1%;}
.container {display: block;}
/* Hide from を終了IE-mac */

5. 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; 
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-スタイル:標準;フォントの太さ:標準; 
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q: before,q:after {content:”;}

6. スクロール レンダリング IE (IE滚アニメーション条渲染)

html {
background : url(null) fixed no-repeat; 
}

7. 不透明度（透明度）

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

8. PRE タグ (标签预格式)

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !重要; /* Mozilla、1999 年以降 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
ワードラップ: ブレイクワード; /* Internet Explorer 5.5+ */
}

9. Li 背景 繰り返し IE (LI标签背景重复)

 
 
#leftnav li { zoom: 1;} /* haslayout=true */
 
 

10. 知っておきたいこと（最好知道的）

@charset “UTF-8″; 

/* ————————————————————————-
WinIE7
———————————————————— ———- */
*:first-child+html selector{property:value;}

/* ——————————————————————-
WinIE6 および Mac IE
——————————————————————- */
* html selector{property:value;}

/* ———— ———————————————————-
WinIE6
————————————————————————- */
/**&*/

/* ——————————————————————-
MacIE
———————————— ———————————- */
/**&*/
selector{property:value;}
/**/

Web ページ制作におけるベスト 10 の CSS ハックに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。