Question

在页面中，我设置了按钮和链接的样式。使用检查器，我发现属性相等，按钮在外观上与链接非常相似。两者的字体粗细均为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>

Answer 1

按钮的字体系列被用户代理覆盖。您必须明确指定按钮的字体系列。我还合并了一些样式，因为您要重复相同的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>

Answer 2

这里是指向它的链接，外观相同https://jsfiddle.net/cwnv5m63/

<a href="#">Anchor</a><br />
<button>Anchor</button>

body {
  font-family: "Helvetica";
}
a {
        text-decoration: none;
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding-right: 0;
                color: black;
}

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

它以前没有的原因是按钮具有本机样式，因此它会自动添加填充，因此我已经用样式覆盖了它。

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

2 个答案: