CSS 填充和边框半径未应用于移动设备

Question

我有一个电子邮件联系表单，带有一个提交按钮，以及按钮上的一些基本样式。 所有样式都适用于桌面，并且大多数样式都适用于移动设备，而不是填充或边框半径。 我已经尝试切换到 EM 单位而不是像素。 网址是http://sharperprogrammer.com/contact （不是自我宣传，只是认为这有助于查看完整内容）

HTML：

<input type="submit">

CSS：

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    /* padding: 12px 20px; */
    padding: 1.2em 2em;
    border: none;
    border-radius: 0.4em;
    cursor: pointer;
    margin: 10px;
}

我什至将我的 iPhone 连接到我的 Mac 并打开了 Safari 开发者工具，我可以选中和取消选中以在按钮上切换不同的样式，但填充似乎没有任何作用。 这对我来说很奇怪，因为像背景颜色这样的其他样式工作正常，所以我知道至少所有东西都是相连的。 谢谢参观！

编辑：样式在 Android 手机的 Chrome 浏览器上很好，但样式在我的 iPhone 的 Chrome 或 Safari 浏览器上没有正确应用。 为了以防万一，我已经清除了浏览器缓存。

这是一个屏幕截图：

Answer 1

尝试添加这个：

• 在媒体查询中的navbar.css文件中：

@media only screen and (max-width: 600px) {
.navbar{
    flex-direction: column;
    align-items: center;
}

}

Answer 2

在我看来，Safari / Chrome Mobile 有一些比input [type=submit]更具体的默认按钮样式。 也许更具体的样式没有指定背景颜色，这就是您的工作原理。

我找到了两个解决方案，我将在下面链接，它们都保证添加-webkit-appearance: none; 作为解决方案。

iPad/iPhone 上的 CSS 提交按钮奇怪的渲染

为什么我的按钮样式在笔记本电脑和移动设备上会发生变化

希望这对你有用:)