CSS表单元素样式问题

时间：2010-08-24 来源：houbusheng123

(一)

首先，说明一下表单标签（input、select）可能在各种浏览器中的表现差异：

1.当input或select与其他标签（例如a、label）混排时，可能出现不居中的问题。

2....混排时，外层标签不能控制表单标签。

3.input里面输入的文字行高存在差别，有空隙等等。

解析现象：

input：text特性时，

默认情况下：

1.firefox高度height为16px；IE下高度为14px;

2.字体大小为：13.3333px；

3.input存在padding值：Firefox为：padding：1px 0；IE下为：padding：1px 0 3px 0；

(二)
<title>测试vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="test2" value="2" type="radio">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input class="inputcheckbox " name="Button1" type="button" value="按钮" />
<br/><br/>
<select class="inputcheckbox " name="Select1">
<option>测试文字</option>
</select>
<label>测试文字</label>
</html>