Question

平衡<select..>元素和<input type="text"..>元素的高度的最佳方法是什么？由于盒子尺寸模型的差异，这证明是困难的。

Google Chrome的用户代理样式表包含：

select { -webkit-box-sizing: border-box; }

..而其他文本输入字段使用内容框模型。为什么不同？我是否应该使所有基于文本的输入字段都使用边框模型？

BTW，我正在使用符合标准的模式（使用<!DOCTYPE html>）。

Answer 1

是的......这非常困难不要忘记firefox处理表单元素的问题也不同。跨浏览器表单操作充其量是不可能的。：d

有些事情需要注意。 line-height不能用于所有元素..即。 firefox硬编码行高度输入[type = text]元素。

我有一篇关于使用内联块和垂直对齐的文章，这可能对某些人有用..（使用verital-align：baseline;） The Joys of Inline Block at screwlewse.com

另请注意，许多较新的浏览器都添加了这个Chrome，使表单输入看起来更像操作系统。（但这看起来像一个不同的问题）

Answer 2

怎么样？

select {padding: 1px;}

Answer 3

难道你不能只使用CSS显式设置所有输入的高度并选择字段到特定的像素高度吗？如果由于边框而没有“看起来”像相同的高度，请删除边框或以相同的方式均匀地设置它们。例如：

<html>
  <body>
    <input type=text style="border: 1px solid black; height: 37px;">&nbsp;
    <select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>&nbsp;
    <input type=button style="border: 1px solid black; height: 37px;">
  </body>
</html>

这使得所有三个表单字段都高37像素。适用于IE和Chrome，但我没有在其他地方测试过。

或者，一旦页面加载完毕，循环遍历所有表单字段，找到最大的表单字段，并使用他们的style.height属性设置其他字段的高度。

Answer 4

是的，你应该使用make all“基于文本的输入字段使用border-box模型”。

其他几个问题such as here已经回答了这个问题。

WhatWG / W3c接受当前的边框模型的事实很奇怪他们没有做到这一点甚至更奇怪。

覆盖默认设置以创建一致的设计没有任何问题没有其他解决方案可靠或正确。

Answer 5

也许我已经离开了基地但你尝试过使用行高值吗？

如何均衡文本输入字段的高度？

5 个答案: