css - HTML5占位符文本在Safari中添加宽度导致滚动条和闪烁

Question

在 Safari 和 Chrome 中，该placeholder属性似乎增加了不可见的宽度，当窗口水平调整大小时，会导致水平滚动条和类似闪烁的渲染。

overflow: hidden;可以应用于父元素来抑制问题。但是，它剪辑了我的表单域焦点效果。

有没有办法使用某些供应商前缀值来防止这种情况，例如::-webkit-input-placeholder {}或其他方式？

将属性添加到表单输入时，水平滚动条会在 webkit 浏览器上水平调整大小时闪烁。具体来说，是什么风格触发了这种行为？以及如何防止或覆盖这种行为！？

Answer 1

我在 Chrome 和 Safari 中查看了您的网站，但似乎没有您提到的问题。但是，您的顶部图像溢出到顶部，因为您将溢出设置为隐藏并且您没有为标题设置上边距。因此，我继续创建了该边距：

 #header img {
  margin-top: 50px;
 }

这解决了问题。我希望我可以发布一张图片。

Answer 2

许多输入元素具有默认填充。当您声明时width: 100%，它会导致元素宽度为 100% + 填充。为了防止填充增加宽度，只需使用box-sizing: border-box;