不同平台上的 CSS 按钮答案

【问题标题】：CSS Buttons on different platforms不同平台上的 CSS 按钮
【发布时间】：2018-08-17 18:11:46
【问题描述】：

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

【问题讨论】：

显示代码...很多人使用 div 作为自定义按钮
@TaylorA.Leach 这种行为可能break accessibility.
您可以创建自己的“按钮”来解决浏览器拥有自己的按钮样式的问题。只需在 div 上使用一个类，使其外观和行为与按钮完全相同，但它不是按钮！ Genius
这是一个纯 CSS 按钮。没有 div

标签： html ios css background-color platform

【解决方案1】：

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

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

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

【讨论】：

明白。不同的浏览器有不同的默认css样式表和css渲染。
新的浏览器更新不再需要类似 webkit 的标签。

【解决方案2】：

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

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

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

仅按钮重置

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;
}

【讨论】：