国外转过来十个最好的CSS hacks
2011-10-30 13:22
148 查看
If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I’ve written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..
Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
1. Vertical align div (垂直居中)
http://stylizedweb.com/2008/02/01/vertical-align-div/
2. Min-Height (最小高度)
selector {
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency (透明png)
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear (自动清除)
.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */
5. Reset 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; padding: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. Scrolling Render IE (IE滚动条渲染)
html {
background : url(null) fixed no-repeat;
}
7. Opacity (透明度)
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
8. PRE Tag (标签预格式)
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 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 Background Repeat IE (LI标签背景重复)
<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>
10. Good to know (最好知道的)
@charset “UTF-8″;
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/
Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
1. Vertical align div (垂直居中)
http://stylizedweb.com/2008/02/01/vertical-align-div/
2. Min-Height (最小高度)
selector {
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency (透明png)
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear (自动清除)
.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */
5. Reset 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; padding: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. Scrolling Render IE (IE滚动条渲染)
html {
background : url(null) fixed no-repeat;
}
7. Opacity (透明度)
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
8. PRE Tag (标签预格式)
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 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 Background Repeat IE (LI标签背景重复)
<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>
10. Good to know (最好知道的)
@charset “UTF-8″;
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/
相关文章推荐
- 网页制作中十个最好的CSS hacks
- 将CSS压缩至一行的十个步骤
- 国外是如何处理CSS+DIV美化的研究
- 国内国外最好的java开发论坛及站点
- css hacks
- The CSS Anthology : 101 Essential Tips, Tricks and Hacks
- 十个最好的免费杀毒软件下载
- 用CSS让文字颠倒过来显示
- 酷站欣赏:国外最新的CSS网站设计30佳作品
- 十个最好的免费杀毒软件
- Dreamweaver CS5 CS6 代码格式化、美化插件(可同时格式化HTML、JavaScript、CSS )目前最好用的代码格式化扩展
- 2008年国外50个最佳CSS设计欣赏
- CSS基础:最容易引起错误的十个问题与技巧
- 国外博客推荐的十个服务器监控工具
- 几个国外的XHTML模板站,DIV+CSS模板下载
- 讨论CSS hacks,条件引用或者其他
- 国内国外最好的java开发论坛及站点
- 十个超级技巧助你解决CSS兼容问题
- ☆☆☆过来人给嵌入式工程师的十个小建议
- DIV+CSS网页布局中CSS无效的十个常见原因