时间戳

首页 > 解决方案 > 为什么在 CSS 样式中按钮和链接的样式相同但类型呈现不同？

css - 为什么在 CSS 样式中按钮和链接的样式相同但类型呈现不同？

问题描述

在我的页面中，我设置了按钮和链接的样式。使用检查器，我发现属性相等，按钮在视觉上与链接非常相​​似。两者的字体粗细均为 200。但是，按钮的文本稍微浅一些。这是预期的行为吗？

body {
  font-family: "Helvetica";
}

button {
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding-right: 0;
}

a {
        text-decoration: none;
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding-right: 0;
}
<a href="#">Anchor</a><br />
<button>Anchor</button>

标签： cssbuttonhyperlink

解决方案

按钮的字体系列被用户代理覆盖。您必须明确指定按钮的字体系列。我还合并了一些样式，因为您重复相同的 CSS 语句。这是我的解决方案：

a, button {
        text-decoration: none;
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding: 0;
        font-family: "Helvetica";
}
<a href="#">Anchor</a><br />
<button>Anchor</button>

推荐阅读