Разница между отступами между Firefox и Chrome / Safari

Question

Разница между отступами между Firefox и Chrome / Safari

0

Я работаю над веб-сайтом, и у меня возникла проблема с объявлением CSS padding-top.

Моя проблема заключается в том, что отступы отображаются в Firefox по-разному в отношении Chrome или Safari. Я видел это, как только я переключил свой navbar div на position: fixed.

Здесь это JSFiddle с базовым кодом, который показывает проблему: http://jsfiddle.net/8puCW/3/

Есть ли способ поддерживать фиксированный заголовок/верхнюю панель и навигационную панель без различий в рендеринге?

Благодарю.

Emanuele 09 июнь 2014, в 22:29

Источник

0

Не поменяет ли это изменение верхнего стиля на .main с 45 на 37?
j08691 09 июнь 2014, в 19:54
0

Вы можете сделать сброс CSS; `* {margin: 0; отступы: 0; } `
TylerH 09 июнь 2014, в 19:54
0

@j08691 j08691 не считай эту белую полоску. попробуйте открыть jsfiddle с помощью firefox, и вы увидите, что «меню» расположено по-другому (совсем ниже «моего контента»).
Emanuele 09 июнь 2014, в 19:58
0

@TylerH Сброс CSS не решает проблему. Вы можете попробовать самостоятельно на jsfiddle.
Emanuele 09 июнь 2014, в 19:59

Показать ещё 2 комментария

Теги:

html

css

google-chrome

firefox

safari

1 ответ

Ещё вопросы

Не поменяет ли это изменение верхнего стиля на .main с 45 на 37?
Вы можете сделать сброс CSS; `* {margin: 0; отступы: 0; } `
@j08691 j08691 не считай эту белую полоску. попробуйте открыть jsfiddle с помощью firefox, и вы увидите, что «меню» расположено по-другому (совсем ниже «моего контента»).
@TylerH Сброс CSS не решает проблему. Вы можете попробовать самостоятельно на jsfiddle.

Giacomo Paita · Accepted Answer · 2014-06-09T18-10-00.000Z

поскольку вы используете позицию: fixed (http://www.w3schools.com/cssref/pr_class_position.asp) для.navbar, избавляйтесь от padding-top, чтобы поместить элемент и использовать свойство top, как показано в этом Скрипт: http://jsfiddle.net/8puCW/9/. Я тестировал его в FF Mac, и он последователен.

.navbar {
    position: fixed;
    background: #D0D1D0;
    float: left;
    text-align: center;
    top: 54px; /*UPDATE HERE*/
    width: 200px;
    height: 100%;
    padding-top:20px; /*UPDATE HERE*/  }