html - Fieldset 中的 Textarea 留下底部空白

Question

我想弄清楚为什么 Chrome 在 fieldset 标签中使用文本区域时会留下底部空白。

如果你看下面的 fiddle with Chrome，你会明白我的意思

https://jsfiddle.net/552aamop/1/

fiddle CSS 包含 Eric Meyers 标准重置，我已经重置了 input 和 textarea 标签的边距和填充。 HTML 在元素之间不包含空格。

<form>
<fieldset><input type='text'/></fieldset>
<fieldset><input type='text'/></fieldset>
<fieldset><textarea>Hello</textarea></fieldset>
<fieldset><textarea>Hello</textarea></fieldset>
</form>  

Firefox 和 IE 似乎在呈现字段集之间没有间隙。 Chrome 会留下一个空白，但只有在字段集包含文本区域时才会留下空白。知道为什么吗？

我使用的是 Chrome 版本 56.0.2924.87。

Answer 1

因为您在基础上使用 font: inherit;。 Chrome 正在添加其默认行高。似乎 Firefox 的默认行高为 1.1，但 Chrome 的默认行高为 1.2。

速记:font:font-style font-variant font-weight font-size/line-height font-family;


这将解决您的问题。

fieldset{ line-height:0}

检查这个 fiddle :