Разница между Firefox и дополнением Chrome

есть разница в том, как firefox и chrome отображают дополнение в css. то, что кажется правильным в chrome, дополнено в firefox. есть ли способ решить?

.button {
    font-family: helvetica, arial;
    font-size: 64px;
    width: 70px;
    height: 45px;
    font-weight: bold;
    padding: 0px;
    padding-top: 25px;
    background-color: #000;
    color: #fff;
    text-align: center;
    float: right;
    margin: 7px 10px 0 0;
}

Ответ 1

Если ваш .button является button, это может быть основной задачей фокуса mozilla... попробуйте это?

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

Ответ 2

Firefox и Chrome визуализируют padding точно так же. Ваша проблема в другом месте.

Используете ли вы reset CSS? Если нет, объявление по умолчанию line-height может помешать рендерингу вашей кнопки.

Во-первых, ваш height меньше, чем ваш font-size. Поскольку вы не указали overflow, ваш height всегда будет расширяться как минимум до font-size (или независимо от вашего line-height).

Если ваш класс .button на самом деле является элементом <button>, также примените исправление superUntitled.

Ответ 3

Фокус-внутреннее исправление работает, но я также добавляю отрицательные верхние и нижние поля, чтобы получить его на правильную высоту. например:.

*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}

Я любил Firefox, но он стал раздутым беспорядком и упал с моего рождественского списка несколько лет назад.

Ответ 4

Вы на самом деле правы - в Firefox есть ошибка, где высота строки элемента кнопки не может быть изменена с помощью свойства CSS-height.

Подробнее см. эту ссылку: http://www.cssnewbie.com/input-button-line-height-bug/

Решением является использование прокладки вместо высоты строки.

Ответ 5

Способ, который работал у меня, заключался в том, чтобы установить высоту объекта, чтобы firefox, chrome и opera отображали его одинаково и удаляли все дополнения.

.footertext6{
    float: left;
    padding-top:10px;
    width: 160px;
    height:102px; */setting height here*/
    background-color:#ffffff;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 15px;
    border-top-right-radius: 50px;    
}