时间戳

首页 > 解决方案 > 如果可能的话，如何使我的输入在所有浏览器和所有设备上保持一致？

css - 如果可能的话，如何使我的输入在所有浏览器和所有设备上保持一致？

问题描述

我有一些问题只遇到我的iPad Pro 12.9，而不是在手机或台式机上。

上：Safari + Chrome + 火狐

在此处输入图像描述

input[type=text], input[type=email], input[type=time] {
    color: white;
    background-color: black;
    font-size: 1em;
    width: 100%;
    border: solid 1px white;
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
}

如何让我的输入padding在所有浏览器和所有设备上看起来都很好？

标签： cssinput

解决方案

首先，您需要确保您的输入不会被另一个声明覆盖，这通常会导致您在这里遇到问题，特别是与line-heightandfont-size属性有关的问题。将您的 line-height 值设置为line-height: normal您的输入元素。使用input[]选择器在 CSS 级联中的特异性较低，因此可能会被覆盖。

如果上述值没有被样式表的不同部分覆盖，您可以在输入元素上使用box-sizing:border-box, 。line-height: normal您很可能需要稍微增加填充值以获得所需的美学外观。

推荐阅读