@H_301_0@下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。

@H_301_0@HTML 中 input 和 button 设置同样高度却不能等高的原因是，Button 在高度计算上始终使用了 Quirks 模式。在 Quirks 模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部（button 的高度包含边框的高度，而文本框 text 则不包含边框高度）。表单是网页中的重要元素，以及高频率出现的元素，如何把表单做的漂亮非常重要。首先我们需要解决一个实际的问题，就是文本框与按钮不对齐的问题。这个看似简单的问题追究到底可以发现很多我们未尝想到的原理。按钮(button)的高的解析问题导致了不对其问题的根本原因。

@H_301_0@

@H_301_0@下面演示正确的代码示范。

@H_301_0@文字要包含在 label 标签中，并设置行高，否则文字会与文本框的顶 端对齐

@H_301_0@文本框要设置 vertical-align:middle;否则文本框与 button 顶端对齐

@H_301_0@button 中文字垂直居中，要设置高和行高，行高要小于高

@H_301_0@button 的高度包含边框的高度，而文本框 text 则不包含边框高度

@H_301_0@对 input 标记设定样式，代码如下：

@H_301_0@<form> <input type=”text” name=”textfield” id=”textfield” />

@H_301_0@<input type=”submit” name=”button” id=”button” value=”提交” />

@H_301_0@</form>

@H_301_0@#textfield{border:1px solid #000;height:16px;}

@H_301_0@#button{background:#FFF;color:#000;border:1px solid #000;height:20px;}

@H_301_0@文本域设置高度 16px，按钮高度需要设置 20px。按照 IE 的标准正常对齐，但在 Firefox 中文本域和按钮高度是错开的。

@H_301_0@兼容 Firefox

@H_301_0@此时通过对 input 标记设定左浮动 (float:left)，即可兼容 Firefox，CSS 代码如下：

@H_301_0@#textfield{border:1px solid #000;height:16px;float:left;}

@H_301_0@#button{background:#FFF;color:#000;border:1px solid #000;height:20px;float:left;}

@H_301_0@当然，可以使用 CSS Hack 以更有针对性地控制浏览器表现，还有一种办法就是去掉元素边框代码如下：

@H_301_0@<style>

@H_301_0@#textfield{

@H_301_0@height: 45px;

@H_301_0@width: 180px;

@H_301_0@background: yellow;

@H_301_0@border: none;

@H_301_0@}

@H_301_0@#button{

@H_301_0@height: 45px;

@H_301_0@width: 90px;

@H_301_0@background: red;

@H_301_0@border: none;

@H_301_0@}

@H_301_0@</style>

@H_301_0@

小结：

@H_301_0@button 在高度计算上始终使用了 Quirks 模式

@H_301_0@在 Quirks 模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部，所以在 text 和 button 上同时设置边框就会得到 button 的高度比 text 小的现象

@H_301_0@文本框要与 button 按钮对齐，button 的高度是要高于文本 text 的高度的

@H_301_0@button 的高度包含边框的高度，而文本框 text 则不包含边框高度

@H_301_0@以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。