在移动野生动物园

Question

更新：此处是指向minimum reproducible bug的链接。运行它的说明在自述文件中

我在移动版Safari的输入占位符下面有底部填充问题。这是输入占位符在移动野生动物园中的样子：

以下是Chrome上输入占位符的外观：

正如您所看到的，占位符文本与底部边框之间的空间存在显着差异。

我已尝试按照其他一些stackoverflow答案的建议更改line-height，并尝试使用相应的供应商前缀更改padding-bottom上的::placeholder ...我不确定还有什么可以尝试。

Answer 1

我建议不要将line-height用于输入和按钮，因为它有主要的浏览器不一致性。而是使用高度和填充来使元素达到您想要的大小，但在这种情况下，一旦删除margin属性，使用line-height就足够了。

Answer 2

如果没有看到代码，很难回答。您是否尝试在顶部对象上放置margin-bottom或在输入字段上放置margin-top。 你必须把它放在safari浏览器的条件下，你可以直接在CSS中使用 - 这里引用： is there a css hack for safari only NOT chrome?

这必须有一个下划线问题，我经历了类似这样的事情，浮动在两个浏览器之间关闭0.1像素，这不能正确渲染我的网格。我通过使用所有对象的固定值来修复它：width和height。我注意到顶部图像中的铅笔远离加利福尼亚而不是Chrome。