<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>让输入框在所有浏览器下的统一</title>
<style>
body{
margin:0;
padding:1px;
font-family:"Microsoft YaHei",Arial,SimSun,Tahoma;
font-size:12px;
background:url(page-bg.gif) 0 0 repeat;
}
h1{
margin:0;
padding:0;
height:69px;
}
h2{
margin:1px 0 0;
padding:0;
font-size:12px;
height:35px;
}
div{
height:105px;
}
label{
clear:left;
float:left;
width:119px;
height:19px;
line-height:19px;
overflow:hidden;
text-align:right;
}
input{
color:#666;
font-size:12px;
}
textarea{
width:400px;
height:5em;
margin:0 0 0 4px;
*margin:-1px 0 0 4px;
_margin:-1px 0 0 2px;
font-size:12px;
border:1px solid #a7a6aa;
background:#FFF url(input-bg.gif) 0 0 no-repeat;
}
input[type="text"]{
margin:0 5px 0 5px;
*margin:-1px 5px 0 5px;
width:222px;
*width:220px;
height:15px;
border:1px solid #a7a6aa;
background:#FFF url(input-bg.gif) 0 0 no-repeat;
}
input[type="checkbox"]{
margin: 3px 0 0 5px;
*margin:-1px 0 1px 1px;
_vertical-align:middle;
}
input[type="radio"]{
*margin:-1px 0 0 1px;
}
input[type="file"]{
height:18px;
margin:0 0 0 4px;
*margin:-1px 0 0 4px;
}
select{
margin:0 0 0 4px;
_margin:0 0 0 2px;
}
* html input.text{
margin:-1px 5px 0 2px;
width:220px;
height:15px;
border:1px solid #a7a6aa;
background:#FFF url(input-bg.gif) 0 0 no-repeat;
}
* html input.checkbox{
margin:-1px 0 0 -2px;
}
* html input.radio{
margin:-1px 0 0 -2px;
}
* html input.file{
margin:-1px 0 0 1px;
}
</style>
</head>
<body>
<h1>input输入框在浏览器下的统一</h1>
<h2>input type="text"</h2>
<div>
<label for="Text">输入框:</label><input type="text" class="text" id="Text" />
</div>
<h2>input type="checkbox"</h2>
<div>
<label for="Checkbox">复选框:</label><input type="checkbox" class="checkbox" /><br />
</div>
<h2>input type="radio"</h2>
<div>
<label for="Radio">单选框:</label><input type="radio" class="radio" /><br />
</div>
<h2>input type="file"</h2>
<div>
<label for="File">提交表单:</label><input type="file" class="file" id="File" />
</div>
<h2>textarea type="file"</h2>
<div>
<label for="textarea">提交表单:</label><textarea name="" class="textarea" id="Textarea"></textarea>
</div>
<h2>select</h2>
<div>
<label for="Select">下拉框:</label>
<select name="" id="Select">
<option>asdasd</option>
<option>asdasd</option>
<option>asdasd</option>
<option>asdasd</option>
</select>
</div>
</body>
</html>
第一次测试，出去select框没有控制外，还有的缺陷是多行的展现方式下不统一的问题.
这个多行抽时间会修改完全。
个人比较倾向这类表单inpue等等都放到fieldset里去.
缺点：
1、由于时间来不及，input type=”text”里和textarea等的padding没有设置。
2、为被浏览器高效识别，把ie7、ff和ie6单独分开写了.不知道后果会怎么样，同样也没有测试。
回复Comments
作者:
{commentrecontent}