CSS - 同一个类在其他元素上看起来不同

Question

我创建了一个名为“primary”的按钮类。 我注意到，它看起来不同的一个button和a标签，他们有其他尺寸的例子。

 .primary { border-radius: 0; color: white; background: #EC7404; padding: 9px 29px; font-size: 1.5rem; vertical-align: middle; border: none; }

 <button class="primary">This is a test</button> <a class="primary">This is a test</a>

我怎样才能让课程在两者上看起来一样？

JSFIDDLE

Answer 1

使用 HTML 标签，浏览器会向标签添加自己的默认样式（是的，它可能因浏览器而异）。 在您的情况下，您需要在.primary类中添加 2 个属性：' display: inline-block and font` 属性。

根据您共享的 JSFiddle。 这是更新主类代码后两个元素高度的更新代码和屏幕截图：

.primary{
    border-radius: 0;
    color: white;
    background: #EC7404;
    padding: 9px 29px;
    /*font-size: 1.5rem;*/
    vertical-align: middle;
    border: none;

    /* these 2 lines to be added */
    display: inline-block;
    font: 400 1.5rem Arial;
}

Answer 2

 .primary { border-radius: 0; color: white; background: #EC7404; padding: 9px 29px; font-family: "Goudy Bookletter 1911", sans-serif; font-size: 1.5rem; vertical-align: middle; border: none; }

 <button class="primary">This is a test</button> <a class="primary">This is a test</a>

Answer 3

这是因为浏览器已经为 HTML 元素赋予了自己的样式。 您将使用自己的 CSS 覆盖此样式。 但是默认情况下， button将具有与a元素不同的样式。

例如 line-height 和 font-family 可能不同。 在您的情况下， display: inline-block似乎可以解决问题。

Answer 4

这是因为元素继承了默认样式，如果您希望锚点看起来相同，只需在类中声明字体系列和字体大小即可；

.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
font-family: sans-serif;
font-size: 26px;

}