Why does text in a button element have different lengths in Chrome and Firefox?

S

Sergey2015-05-15 09:49:02

css

Sergey, 2015-05-15 09:49:02

In chrome the length is 98px and in Firefox it is 113px. Why is this happening? I need the text to be the same length.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .a{
                margin: 0;
                padding: 10px;
                border: 0;
            }
        </style>
    </head>
    <body>
        <button class="a">Приветствие</button>
    </body>
</html>

jsfiddle.net/u20uysyo

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

E

Evgeny Petrov, 2015-05-15
@frost18

Try removing padding in FF

button::-moz-focus-inner { 
  border: 0;
  padding: 0;
}

Having installed the font, we will get slight differences in the rendering of the font itself, but everything is about the same in size .

I

idclev31, 2015-05-15
@idclev31

используйте какой-нибудь css reset,возможно это несколько исправит ситуацию

�

Китана, 2015-05-15
@Adara

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

�

Дмитрий Шинкарь, 2015-05-15
@DeadCowsDontMoo

Потому что Chome это ппц, а не браузер - вот почему :D
ЗЫ. Такой вывод я сделал после 2-х дней мучения с Chrome+HTML5