CSS 不同平台上的按钮

Question

CSS 在 windows 桌面或苹果 mac 上查看时，按钮的默认背景颜色为灰色 (#DDD)，但在 ios 移动设备上查看时，默认背景颜色是透明的。这可以通过手动添加 css 背景颜色作为 #DDD 来解决，但为什么会发生这种情况？有什么想法吗？

Answer 1

它们看起来不同，因为浏览器对 CSS 的呈现不同。

我建议使用-webkit 和-moz 来避免此类问题。

.btn{
  -webkit-background-color: #DDD;
  -moz-background-color: #DDD;
   background-color: #DDD;
 }

Answer 2

不同的浏览器对 button、select 下拉菜单、input 文件上传按钮有不同的样式。

这些样式取自浏览器中存在的默认样式表。

为了避免这些默认样式，您必须使用 CSS 重置样式表来重置样式，例如 Normalize CSS, Meyers CSS reset。

仅为按钮重置

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;

    background: transparent;

    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;

    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;

    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;

    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;
}

/* Remove excess padding and border in Firefox 4+ */
&::-moz-focus-inner {
    border: 0;
    padding: 0;
}

CSS 不同平台上的按钮

CSS Buttons on different platforms

html

ios

css

background-color

platform