上下文

Question

我有这个：

<input type="text" placeholder="Un employé, un standard ou un numéro..." />

使用CSS属性：padding: 4px。

渲染：

enter image description here

有关信息，我使用Bootstrap作为CSS。

研究

在屏幕上，Chrome只会padding-left: 4px而不是padding: 4px。

我尝试了padding: 4px 4px 4px 4px和padding-top: 4px; padding-right: 4px; etc。

同样的问题。

奇怪的是，我单独尝试padding-top: 4px并且它有效。任何padding-xxx都是一样的。

最后，我在padding: 4px的页面上尝试了input，然后就可以了。

有什么问题？

Answer 1

您是否为height通过CSS设置了input值？如果是这样，请尝试删除它，看看它是否有帮助。

（为答案接受而复制了评论。）

Answer 2

Chrome会将默认样式应用于大多数表单元素。我们通过将-webkit-appearance: none;添加到<input>的样式来解决此问题。

Answer 3

您是否在元素上设置了填充或高度，请尝试增加/减少或如果它不起作用然后将其删除并再次测试它可能有所帮助。请尝试在所有浏览器中同时测试它，以便在所有浏览器中使其类似。

Answer 4

我再次使用Bootstrap遇到此问题，原因是我有<!DOCYTPE>而不是<!DOCTYPE html>。