css - Normalize.css 文本字段超出容器

Question

我在 Wordpress 中的一个小元素中使用 normalize.css，但是当我使用联系表单时，normalize 导致文本字段跨越容器:

http://notfilc.eu/wordpress/

违规代码是:

button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}

我可以将它从规范化中删除，但我想了解它为什么会消失，但我就是看不到它。 HTML 非常大，因此很难实现精简的测试用例，但是如果有合理的答案，我愿意随后制作它供其他人学习。

Answer 1

这是因为你使用的是size=40

<input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" />

因此溢出.. My Fiddle

尝试使用 size="30" 或更少，它会减少..

如果你想限制字段中的字符使用maxlength