Question

我有一个简单的网站，其中包含一个带有CSS样式链接的按钮。

<div id="contact_button">
    <a href="mailto:contact@fakemail.com" class="button">CONTACT</a>
</div>

边框在IE和Firefox上显示得很好，但在Chrome（移动设备或桌面设备）上无法正常显示。有什么想法吗？

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;

  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;

  margin: 0 auto;
  width: 143px;
  display: block;

  background-color: #FFF; /* White */
  border: 2px solid black;
  color: #000;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

a.button:hover {
  background-color: #000; /* Black */
  color: white;
}

Answer 1

从选择器-webkit-appearance: button;中移除样式a.button，我在Chrome和Firefox中都看到相同的输出（白色背景和2px宽度的黑色边框）。

CSS按钮边框在Chrome中不起作用

1 个答案: