移除 IE 下 textarea 的滚动条
textarea {
overflow: auto;
}
完全的CSS实现的透明效果
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
...
<div class="box transparent">larger content</div>
X-UA-Compatible
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Internet Explorer 条件判断
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> for higher than IE9 or non-IE <![endif]-->
YUI 字体 Reset
更多相关文档请看 YUI developer documentation.
/*
fonts.css from YUI Library: URL - developer.yahoo.com/yui/ */
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
强制显示浏览器滚动条
html { overflow-y: scroll; }
在输入框中显示手型光标
/** label CSS pointer reset **/
label, input[type=button], input[type=submit], button { cursor: pointer; }
表单域与文本标签的对齐
/* @group align radio, labels, forms */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
CSS3 预加载图片(s)
div.imgload {
background:url(images/sheet1.gif) no-repeat;
background:url(images/sprites.png) no-repeat;
background:url(images/mybanner.jpg) no-repeat;
margin-left: -99999px;
}
使用css翻动图片
img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
纯 CSS3 实现的圆角效果
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
IE 下的 Min-Height
.box {
min-height:500px;
height:auto !important;
height:500px;
}
垂直居中
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
类似杂志风格的 Pull 引号
.pullquote {
width: 220px;
float: right;
margin: 5px;
margin-left: 25px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #333;
}
花式符号
.amp {
font-family: Baskerville, 'Goudy Old Style', Georgia Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}