Разница в верхней части Firefox (по сравнению с другими браузерами)

Я не нашел четкого решения этой проблемы, поэтому решил создать эту тему. Существует очень раздражает Firefox особенность:Разница в верхней части Firefox (по сравнению с другими браузерами)

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    div{ 
     line-height: 0; 
     margin: 0; 
     padding: 0; 
     border: 0; 
     width: 31px; 
     height: 50px; 
     font: 15px Verdana; 
     background: #0F0; 
    } 
</style> 

<body> 

<div>test</div> 

</body> 
</html>

Вот результат (200%):

Как вы видите, верхняя обивка в Firefox больше (6px), чем верхняя прокладка в другие браузеры (5 пикселей). Как это решить?

EDIT: любой сброс css не исправляет его.

источник

2012-03-10 Jack

я проверил это локально с FF и хром, и они были идентичны. – j08691

@ j08691 Я вижу проблему в ненормированном документе, хотя вам нужно действительно увеличить масштаб, чтобы увидеть разные (очень маленькие). Начал играть с этим поведением. [ненормированный код] (http://jsfiddle.net/3BrPy/show/) vs [нормализованный код] (http://jsfiddle.net/3BrPy/1/show/). –

К сожалению, я все еще вижу эту разницу в 1px в обоих случаях :( – Jack

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

http://developer.yahoo.com/yui/reset/

источник

2012-03-10 16:35:51 sethcall

Пробовал, не исправляет его. – Jack

Это обычно происходит, когда нет значения по умолчанию нормализации делается в вашем CSS, поэтому такие инструменты, такие как normalize.css и в reset таблице стилей пришли около. Такие инструменты пытаются нормализовать и сбросить значения по умолчанию, установленные пользовательскими агентами (браузерами).

источник

2012-03-10 16:37:48

Пробовал, не исправляет. – Jack

@Jack Посмотрите хорошо для меня. Вот демонстрация вашего кода без использования любая нормализация, [без нормализации] (http://jsfiddle.net/3BrPy/show/) здесь мы можем видеть вашу проблему, и теперь вот такой же код, используя таблицу стилей 'normalize.css', [normalized demo] (http : //jsfiddle.net/3BrPy/1/show/), и все выглядит одинаково во всех браузерах. –

К сожалению, я все еще вижу эту разницу в 1px в обоих случаях :( – Jack

поставить это на верхней части CSS:

DIV { /*let Firefox stick to the padding web standards*/ 
     -moz-box-sizing:border-box; 
     box-sizing:border-box; 
     margin:0; 
     padding:0; 
    }

источник

2012-06-04 15:01:44 poepje

Разница в верхней части Firefox (по сравнению с другими браузерами)

ответ

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