Почему в CSS стили кнопок и ссылок одинаковы, а тип отображается по-разному? - PullRequest
Новая
       35

Почему в CSS стили кнопок и ссылок одинаковы, а тип отображается по-разному?

0 голосов
/ 31 октября 2018

На моей странице у меня есть стили кнопок и ссылок. Используя инспектор, я нахожу свойства равными, кнопка визуально очень похожа на ссылку. Вес шрифта составляет 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>

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Вот ссылка на него выглядит идентично 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;
}

Причина, по которой раньше этого не было, заключается в том, что у кнопки есть собственный стиль, поэтому к ней автоматически добавляются отступы, поэтому я переписал это в стилях.

0 голосов
/ 31 октября 2018

Семейство шрифтов кнопки переопределяется пользовательским агентом. Вы должны указать семейство шрифтов для кнопки явно. Я также объединил некоторые стили, так как вы повторяете те же самые 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>
...