为什么不是我在CSS中设置的<input />的line-height属性？

Question

我在CSS中明确设置了line-height元素的<input>属性。但是当我检查firebug中的元素时，此元素的line-height值不是我在CSS中设置的值。并且看起来行高值与我在CSS中设置的无关。可能的原因是什么？

Answer 1

根据CSS 2.1规范中的definition of line-height，它对块容器元素具有特定含义，对非替换内联元素具有不同含义。我找不到关于替换内联元素的任何声明，并且input元素可以被视为替换元素，有些可疑。

无论如何，奇怪的是，浏览器似乎忽略了line-height元素上的input。要解决此问题，您可以考虑设置height属性或设置垂直填充。但结果不会在浏览器中保持一致。根据经验，我们应该期望将文本输入框呈现在浏览器的控制之下，尽管在某些情况下可以使用CSS调整某些功能。

Answer 2

不确定这是不是重点，但是我指定了边距，填充并摆脱了边框，这里你得到了14px：http://jsfiddle.net/mymlyn/Uq5Tt/2/

如果你检查开发工具（并且在进行上述规范之前）确切地说是14px：

http://dl.dropbox.com/u/26827941/ScreenShot060.png（chrome dev工具） http://dl.dropbox.com/u/26827941/ScreenShot061.png（ff中的萤火虫）

在您的情况下，原因可能是您的输入字段具有指定的ID或类

<input id="someID"/> 

并且有类似

的内容

input#someID {line-height: 20px;} 

在你的css的其他地方，你可能试图通过设置

来改变它的值

input {line-height: 14px;}

如果不是出于想法的情况那样：）

Answer 3

行高不会在Firefox中呈现，但我认为它将在IE中。这是一个小技巧，可以让lineheight样式呈现为块元素而不是内联元素。

例如：

这不起作用

span {font-size:12px; line-height:14px} 

但这会：

span {font-size:12px; line-height:14px; display:block;}