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;

}