Визуализация различий относительно позиционированного элемента в разных браузерах - PullRequest
0 голосов
/ 13 декабря 2011

Недавно я создал новую тему WordPress для местной туристической компании, и теперь они получают сообщения о том, что два элемента в моем дизайне не находятся на правильных позициях в Firefox (кажется, характерно для версии 3.6) и Chrome для Mac.

Страница, на которой видны обе проблемы: http://www.totemtravel.com/blog

Проблемы:

  1. Белый флаг с логотипом вверху каждой страницы перепрыгивает нескольков дюймах вправо, чтобы покрыть код зоны первого телефонного номера.
  2. Кнопка поиска в нижней части виджета категорий блогов на боковой панели переходит вправо, из виджета и из содержимого страницы.обертка.

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

Я не буду вставлять страницы исходного кода за темой, поскольку его можно легко просмотреть с помощью Firebug или инспектора Chrome, но, пожалуйста, дайте мне знать, если какая-то дополнительная информация поможет.

1 Ответ

0 голосов
/ 13 декабря 2011

1: img для белого флага должно остаться: 0. Не во всех браузерах по умолчанию слева 0. Firefox, например, по умолчанию слева: 50%. Другая проблема заключается в том, что вы пытаетесь относительно позиционировать элемент td для заголовка «Totem Travel», это недопустимо, и я бы рекомендовал использовать здесь div вместо таблиц.

2: это связано с собственными различиями стилей CSS в браузерах. Вот почему люди используют таблицы стилей CSS Reset, чтобы обнулить все, чтобы вы точно знали, что CSS по умолчанию одинаков. Вот пример: http://meyerweb.com/eric/tools/css/reset/. Эффект, который это оказывает на ваш css, заключается в том, что кнопка отправки падает под вход, так как у нее недостаточно места - поэтому, когда вы относительно позиционируете ее, это выкл в браузерах.

3: Относительное / абсолютное позиционирование - не самый лучший способ стилизовать сайт. Вы найдете много несоответствий, которые вы испытываете, и есть лучшие способы. Я бы рекомендовал посетить некоторые примеры тем на сайтах, таких как themeforest.com или Elegantthemes.com, и посмотреть, как они работают с CSS и HTML

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...