芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
3

CSS 文本域和按钮对齐问题

作者 芒果/分类 代码/发布于 2009-06-12 10:22

在不同浏览器中,CSS 文本域和按钮对齐的表现不尽相同。芒果曾经被此问题困扰很久。后在帕兰的帮助下得以解决。现简要分析此问题的浏览器兼容方法。

对 input 标记设定样式,代码如下:

//HTML 代码
<form>
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交" />
</form>
//CSS 代码
#textfield{border:1px solid #000;height:16px;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;}

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

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

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

当然,可以使用 CSS Hack 以更有针对性地控制浏览器表现。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-textfield-button-align-problem/" title="CSS 文本域和按钮对齐问题" rel="bookmark">CSS 文本域和按钮对齐问题 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 3 条群众意见

  1. bolo /2009-06-12 20:26

    还是用 css hack 好一点。 回应

    #1
  2. 三棵树人 /2010-10-04 12:02

    嘿嘿,蛮专业的嘛。。。 回应

    #2
  3. purelife /2011-04-19 16:39

    我也是刚看到,顺手贴给楼主:“input对齐、button对齐、按钮对齐方法
    下边代码加入样式内: input {vertical-align:middle;} 另外也可以用margin和padding来调整。比较简单的一句就解决掉,或许这个问题已经烦扰您NNNNN久了吧? 呵呵。” 回应

    #3

下面我简单说几句