为什么 Android Chrome 中的边框消失了？答案

【问题标题】：Why is the border box disappearing in Android Chrome?为什么 Android Chrome 中的边框消失了？
【发布时间】：2018-03-04 04:36:10
【问题描述】：

我有这个按钮

.btn-feedback {
  padding: 5px 10px !important;
}

.btn-feedback {
  text-align: left;
  margin-bottom: 0;
  line-height: 1.45857;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

button, html input[type="button"], input[type="reset"], input[type="submit"]{
  -webkit-appearance: button;
}

button, input, select, textarea {
  margin: 0;
}

&lt;button name="button" type="submit" class="btn-feedback"&gt;Skip&lt;/button&gt;

尽管在 Mac 版 Google Chrome 上一切正常：

当我在 Android 上的 Google Chrome 上查看相同的按钮时，它似乎缺少边框...

我不熟悉两个平台之间的渲染差异。关于如何修改我的样式以使按钮在 Android Chrome 上的显示与它在 Mac 上的 Google Chrome 上的显示相同的任何想法？

【问题讨论】：

标签： android css google-chrome button

【解决方案1】：

缺少按钮边框的样式。如果您没有明确说明边框颜色样式，您将获得设备浏览器用户代理为您提供的样式。

.btn-feedback {
  padding: 5px 10px !important;
}

.btn-feedback {
  text-align: left;
  margin-bottom: 0;
  line-height: 1.45857;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  /*Explicitly add a color for the border. I have also used shorthand for border style color and width*/
  border: 1px solid #444;
  border-radius: 4px;
}

button, html input[type="button"], input[type="reset"], input[type="submit"]{
  /*Add all the prefix versions for the different browser types*/
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

button, input, select, textarea {
  margin: 0;
}

&lt;button name="button" type="submit" class="btn-feedback"&gt;Skip&lt;/button&gt;

【讨论】：

【解决方案2】：

在 WebKit（和 Blink）引擎中，<button>s 获得 -webkit-appearance:button; 默认样式。

-webkit-appearance:button 为按钮提供了这样的外观和感觉（见下文）并且是平台相关的。

您可以将其应用于其他元素：

.webkit-appear-button { -webkit-appearance:button; }

<button>I'm a button</button>

<span class="webkit-appear-button">I'm a span, but look like a button</span>

这就是您的按钮发生的情况。由于您没有指定 background-color，因此它继承自 -webkit-appearance:button，如前所述，它会因平台而异。

解决方案：使用background-color: #color（等效background: #color）。

【讨论】：