最近做了一个表单的页面，被输入框的对齐问题烦死了，相信觉得烦的不只我一个，整理下相关的代码，包括输入框内、外文字的对齐。希望对大家有用：
<label><input type="radio" name="info_name">名称</label>
<label>名称：<input class="input_text l_type"></label>
input{
vertical-align:middle;
}
input[type="radio"]{
vertical-align:-1px;
vertical-align:middle\9;
}
.input_txt{
height:18px;
height:22px\9;
padding-left:1px;
padding-top:4px;
padding-top:0\9;
border:1px solid #B3D0DF;
*line-height:22px;
}
另外，跟大家分享下这次发现的终级hack，比之前《 最新CSS兼容方案 》的简单些：
.e{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
.e{
background-color:#FF5500;/* OP */
}
}
原文地址: http://www.cssforest.org/blog/index.php?id=141
使用一种CSS框架理由很简单，提高开发效率，和更简便布局方法
下面将简单介绍blueprint的使用方法：
安装
把以下代码放置到页面<head>中：
<!-- Framework CSS -->
<link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Blueprint的文件介绍
- blueprint/screen.css 正常显示样式
- blueprint/print.css 打印的样式
- blueprint/ie.css 只在IE中使用去除不兼容情形
在src文件夹中样式文件是对上述3个文件细分
- blueprint/src/reset.css: 重置浏览器样式.统一各浏览器的样式
- blueprint/src/grid.css: 格子的样式，配合div标签使用进行列网格设置.
- blueprint/src/typography.css: 设置排版样式，对重置后元素加上统一样式.
- blueprint/src/forms.css: Includes some minimal styling of forms.
- blueprint/src/print.css: 设置默认打印样式.
- blueprint/src/ie.css: 包含Ie6、7的hack
格子使用.
默认情况下格子整体宽950px，有24列，列距是30px，右外距10px，如下计算
Total width = (columns * 40) - 10
<div class="container">
<div class="span-24">Header </div>
<div class="span-4">Left sidebar </div>
<div class="span-16">
<div class="span-8">Box1 </div>
<div class="span-4">Box2 </div>
<div class="span-4 last">Box3 </div>
<div class="span-16 last">Main content </div>
</div>
<div class="span-4 last">Right sidebar </div>
<div class="span-24">Footer </div>
</div>
注意:
- 使用“last” class 在最后一栏的时候（除了类为span-24）
- 确保 一行列数总和等于是其父标签的列数(就使宽度相等)
其他资源：
让IE6支持min-width最小宽度
虽然CSS中的min-width、min-height、max-width、max-height属性在CSS中早有出现，不过支持此属性的浏览器使用比率都不高，比如Firefox。可浏览器使用率占最高的ie6偏偏不支持，虽然后来出场的ie7已经开始支持此属性。不过就用户体验的角度来说多浏览器支持也是很重要的，更何况就目前来说ie6的占有率还是最高的。
特别是在流动布局的使用下，特别会用到min-width、min-height、max-width、max-height这些属性，以下是一种非常方便就可以实现在ie6显示min-width、min-height、max-width、max-height同等效果的方法，在此与大家一同分享。
min-width:700px;
width:expression((documentElement.clientWidth < 700) ? “700px” : “auto” );
如何去除这个虚线框呢？
在IE下，需要在标签 a 的结构中加入 hidefocus=”true” 属性。即：
淘宝网
而在FF等浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：
a {outline:none;}
区别IE6与FF： background:orange;*background:blue;
区别IE6与IE7： background:green !important;background:blue;
区别IE7与FF： background:orange; *background:green;
区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
| |
IE6 |
IE7 |
FF |
| * |
√ |
√ |
× |
| !important |
× |
√ |
√ |
——————
//显示属性
display
list-style
position
float
clear
//自身属性
width
height
margin
padding
border
background
//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
—————–
test:791px!important; /*FF Hack*/
*test:785px!important; /*IE7 Hack*/
test:777px; /*IE7以下*/
可简单解决IE与FF之间的兼容问题（保持FF,IE7,IE的顺序），但CSS Hack貌似对加载有一定的影响 ！
