Почему гиперссылка и кнопка с одинаковым CSS выглядят иначе?

Вот JSFiddle Почему гиперссылка и кнопка с одинаковым CSS выглядят иначе?

Мой HTML:

<a href="register" class="btn btn-splash-action">Register</a><br> 
<input name="SignIn" type="submit" class="btn btn-splash-action" value="Sign In" alt="Sign In" />

Мой CSS:

.btn { 
    display: inline-block; 
    font-family:Arial, Helvetica, sans-serif; 
    text-align:center; 
    text-decoration: none; 
} 
.btn-splash-action { 
    background: #09F; 
    border: 1px solid #0b0e07; 
    color: #ffffff; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 120%; 
    text-decoration: none; 
    padding-bottom: 5px; 
}

В принципе у меня есть гиперссылки с классами CSS, применяемых к нему в качестве кнопки элемента. Однако они визуально имеют разную ширину, а Firebug также вычисляет ширину.

У меня такая же проблема, в IE10 и FireFox 26.

Если я применяю тот же стиль для обоих элементов, почему они выглядят по-разному?

EDIT: Обновленный JSFiddle в http://jsfiddle.net/DnaDG/1/

Попытка сбросить обивка, маржинальная и границы, используя .btn класс, но он по-прежнему не работает.

источник

2013-12-24 volume one

В обоих случаях браузер начинает стили по умолчанию для соответствующих элементов, а затем добавляет к ним свои стили. Тег <a> и тег <input> имеют разные стили по умолчанию (начало).

Вот стили по умолчанию Safari использует для <a> элементов:

color: -webkit-link; 
text-decoration: underline; 
cursor: auto;

И вот некоторые из стилей по умолчанию для <input> элементов:

-webkit-align-items: flex-start; 
text-align: center; 
cursor: default; 
color: buttontext; 
padding-top: 2px; 
padding-right: 6px; 
padding-bottom: 3px; 
padding-left: 6px; 
border-top-width: 2px; 
border-right-width: 2px; 
border-bottom-width: 2px; 
border-left-width: 2px; 
border-top-style: outset; 
border-right-style: outset; 
border-bottom-style: outset; 
border-left-style: outset; 
border-top-color: buttonface; 
border-right-color: buttonface; 
border-bottom-color: buttonface; 
border-left-color: buttonface; 
border-image-source: initial; 
border-image-slice: initial; 
border-image-width: initial; 
border-image-outset: initial; 
border-image-repeat: initial; 
background-color: buttonface; 
box-sizing: border-box;

Есть на самом деле гораздо больше в дополнении тем. Кроме того, разные браузеры имеют разные значения по умолчанию.

источник

2013-12-24 21:11:17

так как я могу полностью сбросить кнопки и стили привязки, прежде чем применять свои собственные во всех браузерах? –

добавьте свои собственные правила стиля, чтобы заменить настройки браузера –

, можете ли вы посмотреть мой обновленный JSFiddle. Я попытался сбросить стили, используя класс .btn, но это не имеет никакого эффекта. –

По умолчанию стиль для каждого элемента различен ... Гиперссылка не имеет границы, например, и есть некоторые стили, которые вы не переопределяете, поэтому элемент сохраняет их. Таким образом, не все стили из вашего css будут иметь эффект. Имеет ли это смысл? Надеюсь это поможет!

источник

2013-12-24 21:14:21 xanesis4

Почему гиперссылка и кнопка с одинаковым CSS выглядят иначе?

ответ

Смежные вопросы