如何修复 Mobile Safari 上奇怪的文本输入字段错误？
在测试我目前正在进行的这种响应式设计时，我注意到一个奇怪的文本输入字段“宽度”错误在 Mobile Safari 上将窗口推到右侧，我似乎无法理解。如果你在电脑上检查它，它会显示得很好。我已经在我的 iPod 和 iOS 模拟器上对此进行了测试（所有设备上都会出现错误）。有什么建议吗？
While testing this responsive design I'm currently working on, I've noticed a weird text input field "width" bug pushing the window to the right on Mobile Safari, which I don't seem to be able to understand. If you check it on your computers, it will show just fine though. I've tested this both on my iPod and on iOS Simulator (bug shows up on all devices). Any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
因此，基本上，移动 Safari 和桌面 Safari 有不同的默认样式表。虽然您在宽度等方面做得很好，但您缺少的一件事是在输入上显式设置填充。猜测这就是罪魁祸首（桌面版 Safari 本质上使输入填充为 1 像素，在移动设备中可能会大几个像素）。我看到你正在使用 -webkit-appearance: none （很好），所以，只要你明确声明填充，你应该很好。
So, basically, Mobile Safari and Desktop Safari have different default stylesheets. While you're doing a good job with widths, etc, the one thing you're missing is explicitly setting padding on the input. Guessing this is the culprit (desktop Safari inherently makes input padding 1px, probably a few px bigger in mobile). I see you're using -webkit-appearance: none (nice), so, as long as you explicitly declare padding, you should be good.