为什么Android Chrome中的边框会消失？

Question

我有这个按钮

＆＃13;

＆＃13;

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

＆＃13;

<button name="button" type="submit" class="btn-feedback">Skip</button>

＆＃13;

＆＃13;

＆＃13;

虽然谷歌Chrome for Mac 的一切看起来都很正常：

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

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

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

<button name="button" type="submit" class="btn-feedback">Skip</button>

Answer 2

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

-webkit-appearance:button为按钮提供了外观和感觉（见下文），并且取决于平台。

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

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

您的按钮发生了什么。由于您没有指定background-color，因此它继承自-webkit-appearance:button，正如所述，它会根据平台而变化。

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