Question

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

overflow: hidden;可以应用于父元素以解决问题。但是，它会剪切我的表格场焦点效果。

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

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

Answer 1

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

Answer 2

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

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

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