<!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=gb2312" />
<title>input等在各个浏览器下的表现统一</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;
color:#263a66;
font-size:20px;
}
h2{
margin:1px 0 0;
padding:0;
font-size:12px;
height:35px;
}
div{
height:105px;
}
ul{
margin:0;
padding:0;
list-style:none;
}
li{
height:32px;
}
label{
clear:left;
float:left;
width:119px;
height:19px;
line-height:19px;
_line-height:20px;
overflow:hidden;
text-align:right;
cursor:pointer;
}
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;
padding:3px;
color:#666;
font-size:12px;
border:1px solid #a7a6aa;
background:blue;
}
input[type="text"]{
margin:0 5px 0 5px;
*margin:-1px 5px 0 5px;
padding:3px;
width:219px;
height:12px;
border:1px solid #a7a6aa;
background:red;
}
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;
padding:3px;
width:223px;
height:12px;
border:1px solid #a7a6aa;
background:aqua;
}
* 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>
<script language="javascript" type="text/javascript">
//<![CDATA[
function atrand(num){return Math.floor(Math.random()*num)+1; }
if (parent && parent.location == self.location) {
var attrack_ref=escape(document.referrer);
document.write("<img src=\"http://www.atpanel.com/1.gif?cache="+atrand(9999999)+"&pre=" + attrack_ref + "&category=&userid=&channel=112&ad_id=\" width=\"0\" height=\"0\" style=\"display:none;\" alt=\"\" />");
}
//]]>
</script>
<h1>input输入框在浏览器下的统一</h1>
<h2>input type="text"</h2>
<div>
<ul>
<li><label for="text-1">输入框:</label><input type="text" class="text" id="text-1" /></li>
<li><label for="text-2">输入框:</label><input type="text" class="text" id="text-2" /></li>
</ul>
</div>
<h2>input type="checkbox"</h2>
<div>
<ul>
<li><label for="checkbox-1">复选框:</label><input type="checkbox" class="checkbox" id="checkbox-1" /></li>
<li><label for="checkbox-2">复选框:</label><input type="checkbox" class="checkbox" id="checkbox-2" /></li>
</ul>
</div>
<h2>input type="radio"</h2>
<div>
<ul>
<li><label for="radio-1">单选框:</label><input type="radio" class="radio" id="radio-1" name="radio-1" /></li>
<li><label for="radio-2">单选框:</label><input type="radio" class="radio" id="radio-2" name="radio-1" /></li>
</ul>
</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>
http://ued.taobao.com/blog/wp-content/uploads/2008/01/input.html