有一个神秘的较低室内装饰

我正试图在表格的某些元素上做出相当准确的风格，这个问题导致我很悲伤。

如果我试图删除

padding

,

margin

,

border

和

outline

的

<input/>

/从

display: block

/ 因此，字段大小仅定义专门，输入字段最终将具有多个额外的填充像素，而不是以相同方式体格化的任何其他块级元素。 这是一个例子：
http://jsfiddle.net/nottrobin/b9zfa/
/

<input class="normalised testSubject" value="hello">

<div class="normalised testSubject">hello</div>

可视化：


在这个例子中

<div>

获得计算的高度

16px

, 和

<input/>

- 计算高度

19px

.

我得到了同样的行为 Chrome 16, Firefox 9 和 Opera 11, 所以这是一个明显独立的渲染引擎。

我可以解决这个问题，手动添加高度，但我不想这样做，因为我希望设计留下来
http://www.alistapart.com/arti ... sign/
.

任何人都可以帮助我理解这里发生了什么，我如何可靠地确保这一点

<input/>

与块水平的任何元素相同，其高度相同吗？
</div>
<div class="answer_text">

<input/>

有一个最小

line-height

取决于字体的大小。 安装两个元素以便更重要

line-height

作品，以及完全删除

line-height

. 但它仍然不允许您具有比最小值更小的高度。 对此的校正是使用伪元素

first-line

并安装它

display: inline-block;

.

演示：
http://jsfiddle.net/ThinkingStiff/B7cmQ/
/


CSS:

.normalised:first-line {

 display: inline-block; 

}

但它没有解释原因

<input/>

除外

<div>

. 甚至

-webkit-appearance: none;

没有修复它。 似乎，在入口处有某种看不见的巫毒，这将其内容视为

inline

. 元素

inline

尺寸最小

line-height

根据字体的大小，我们在这里看到。 这就是为什么

first-line

修理它。 看起来像他造型师元素 "child" 元素

<input/>

.

这是一个显示最小值的演示

line-height

在

inline

元素。 元素

<div>

chtit。

line-height: 7px;

.

<span>

, 虽然它的计算值显示

7px;

, 在视觉上没有遵循它。

演示：
http://jsfiddle.net/ThinkingStiff/zhReb/
/

出口：


HTML:

<div id="container">

<div id="div-large">div <br/>large</div>

</div>

<div id="container">

<div id="div-medium">div <br/>med</div>

</div>

<div id="container">

<div id="div-small">div <br/>small</div>

</div>

<div id="container">

<span id="span-large">span <br/>large</span>

</div>

<div id="container">

<span id="span-medium">span <br/>med</span>

</div>

<div id="container">

<span id="span-small">span <br/>small</span>

</div>

CSS:

#container { 

 background-color: lightblue; 

 display: inline-block; 

 height: 200px; 

 vertical-align: top; 

}



#div-large { 

 line-height: 50px; 

} 



#div-medium { 

 line-height: 20px; 

} 



#div-small { 

 line-height: 7px; 

}



#span-large { 

 line-height: 50px; 

 vertical-align: top; 

} 



#span-medium {

 line-height: 20px; 

 vertical-align: top; 

} 



#span-small {

 line-height: 7px;

 vertical-align: top;

}

</span></div>
<div class="answer_text">
移动

line-height

, 显然，解决了这个问题。

http://jsfiddle.net/mreq/b9zfa/5/
. 只验证 FF 这个。
</div>
<div class="answer_text">
你确定他们使用完全相同的字体吗？ /包括大小/?

尝试添加

box-sizing: border-box

到

input

.

我从未有这个问题，但我只用它在某处的测试中 IE9...
</div>
<div class="answer_text">
我知道我迟到了几个月的问题，但我在搜索中遇到了他 Google 我想添加一件事，可以帮助澄清一些关于元素的其他答案

<input/>

在 Firefox.

默认表单样式 Firefox 包括一些不舒服 CSS:

input {

 ...

 line-height: normal !important;

 ...

}

这使得重新定义该物业几乎是不可能的。

line-height

任何输入形式 Firefox. 这个问题已经多年了，虽然是开发人员 FF 很容易删除

!important

从规则中，我相信一些实施问题与之相关。 under-the-hood. 此外，它似乎有一些网站 /包括 YouTube/, 哪个

偏僻的

论这条规则的行为。

有关更多信息和详细讨论，请参阅
https://bugzilla.mozilla.org/s ... 49259
. 这个主题还有一个很好的帖子博客
http://www.456bereastreet.com/ ... elds/
还有一个 /年长/ Eric Meyer B.
http://meyerweb.com/eric/thoug ... rmal/
.
</div>
</div></div></input>