Сумасшедшая проблема CSS в Firefox Only - фиксированное положение и цвет фона

Question

См. Эту ссылку:

http://lsp2.tpdserver2.co.uk/test.htm

Прекрасно отображается в IE / Chrome, но в Firefox (6.0.1) вокруг синего заголовка есть граница в 1 пиксель.

Если я добавлю цвет фона к заголовку #, белая граница в 1 пиксель исчезнет.Это кажется сумасшедшим.

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

Вотизображение проблемы, которую я вижу:

Ссылка на изображение

Answer 1

Это ошибка рендеринга макета в Firefox. Об этой ошибке уже сообщалось, и, насколько я знаю, она исправлена ​​в следующем выпуске. Единственное решение, которое я знаю, это использовать opacity:0.9999999. Он будет правильно отображаться как непрозрачность: 1, но исправит эту досадную ошибку.

Попробуйте #header { opacity:0.9999999; }

Bugzilla: ошибка 677095

РЕДАКТИРОВАТЬ: Firefox 8 не затрагивается этой ошибкой, а установка непрозрачности на 0.9999999 приведет к странной границе вокруг элемента, поэтому я предпочитаю не использовать ее больше

Answer 2

Браузеры добавляют разные значения по умолчанию, если вы не «сбрасываете» CSS, это может быть тем, что здесь происходит.

Answer 3

Если значение z-index вашего #header-content равно не больше , чем 10, то ошибка устранена.Если это 11 или больше, то я тоже вижу таинственный разрыв.

Действительно странно.

Answer 4

Я не могу воспроизвести в FF 6.0.1; однако, вы, вероятно, можете обойти это с помощью

background-color: transparent;

в заголовочном содержимом # или белый, если вы не хотите, чтобы он просматривался.

Это все равно должно дать исправление, о котором вы упоминали, оставаясь при этом пустым делением.

Обновление:

Хорошо, спасибо за скриншот, все еще не могу воспроизвести, на этот раз с ff 6.0.2 - я осмотрелся вокруг, заметив, что могу воспроизвести похожую проблему на разных уровнях масштабирования.

В блоге объясняется ошибка границы увеличения, которая включает тестовую страницу . Я не уверен, если это происходит, похоже, похоже, но не одно и то же, ошибка увеличения масштаба снимает часть всей страницы, включая границу # header-content.

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