网页制作中十个最好的CSS hacks_经验交流

 如果您是前端编码员，您必须知道制作跨浏览、有效的 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；
明确：两者；
可见性：隐藏；
}
.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,
字段集,输入，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:之后 {内容：”;}

6. 滚动渲染 IE（IE 滚动条渲染）

html {
background : 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
————————————————————————- */
/***/

/* ———— ——————————————————-
MacIE
——————————————————————— - */
/***/
选择器{property:value;}
/**/