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 提交按鈕奇怪的渲染

為什么我的按鈕樣式在筆記本電腦和移動設備上會發生變化

希望這對你有用:)