Web 制作における CSS ハック ベスト 10_エクスペリエンス交換

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

ここでは、あなたの作業に役立つ、厳選された 10 個の CSS ハックとトリックのリストを示します。 CSS コードを作成するだけでなく、時間を節約することもできます。

1.垂直整列 div (垂直居中)

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

2.最小高さ (最小高さ)

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

3. PNG 透明度 (透明png)

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

4. Autoclear (自動清除)

.container:after {
content: “.”;
表示: ブロック;
身長: 0;
明確: 両方。
可視性: 非表示。
}
.container {display: inline-table;}
/* IE-mac から非表示 \*/
* html .container {height: 1%;}
.container { display: block;}
/* 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 {
margin:0;パディング:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong ,th,var {
font-style:normal;font-weight:normal;
}
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 {
背景 : url(null) 修正済み 繰り返しなし;
}

7.不透明度（透明度）

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

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

pre {
white-space: pre-wrap; /* css-3 */
空白: -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 Background Repeat IE (LI标签背景重复)





10.知っておきたいこと (最好知道的)

@charset “UTF-8″;

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

/* ———————————— ———————————-
WinIE6 & Mac IE
——————————————————————-*/ * html selector{property:value;}

/* ——————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/ **/

/* ————————————————————————-
マック
———————— ———————————————- */
/*\*//*/
セレクター{プロパティ:値;}
/**/