Question

在Windows桌面或Apple Mac上查看时，CSS按钮的默认背景色为灰色（#DDD），但在ios mobile上查看时，默认背景色为透明。可以通过手动将CSS背景颜色添加为#DDD来解决此问题，但是为什么会这样呢？有任何想法吗？

Answer 1

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

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

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

Answer 2

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

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

为了避免这些默认样式，您必须使用Normalize CSS，Meyers CSS reset之类的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;
}

不同平台上的CSS按钮

2 个答案: