Не зарегистрировались? Вы можете сделать это, нажав здесь. Когда Вы зарегистрируетесь, Вы получите полный доступ ко всем разделам сайта.
Мультибраузерный сайт: как его сделать
Разместил 30/10/2006 от admin
В данной статье я расскажу вам об основных принципах создания мультибраузерного сайта. Под словом мультибраузерный сайт я подразумеваю сайт, определяющий браузер пользователя и, в зависимости от результата, использующий уникальные этому браузеру CSS стили. Также я расскажу о некоторых проблемах, которые могут возникнуть при работе с браузерами
Значит так, что нам надо? А нам надо сделать так, чтобы сайт отображался
в большинстве браузеров по возможности одинаково (к сожалению, абсолюта не
добиться).
Перво-наперво необходимо определить, в каких браузерах наш сайт должен
отлично выглядеть. В моем варианте это: IE, Opera, Netscape и Mozilla.
И сразу совет: старайтесь не использовать атрибуты , переложите эти
обязанности на CSS... или на строковые элементы стиля aka style="*".
Хотя даже "style" стоит использовать только при крайней необходимости.
Для решения этой интересной задачи я предлагаю следующее: использовать
несколько стилей для разных браузеров. Однако, я вам не советую просто
универсально писать, т.к. получится хуже, но геморроя меньше:)
Вот кодик, который я написал для своего сайта. Так мы определяем,
с каким браузером мы имеем дело:
Функция возвращает имя браузера. Используем ее так:
Т.е., если, например, к нам зашли через IE, то скармливаем CSS файл
по имени ie.css. Можно сделать небольшую модернизацию и определять еще и
версию браузера, но я в этом большого резона не увидел...
Теперь, после того, как мы научились определять браузер юзера и
использовать специфичный ему CSS файл, поговорим о различиях между этими
браузерами.
Вот наиболее важные нюансы, на которых стоит заострить внимание:
Если используете комментарии в CSS файлах, то юзайте конструкцию
/* комментарий */, но никак не # и не ,
т.к. Mozilla и Netscape странно реагируют на них,
поэтому следующий за комментарием элемент стиля просто игнорируется,
правда, в Opera и IE все ОК.
Различное отображение тега .
В IE он будет смотреться наиболее презентабельным образом, а вот в других
браузерах, он мало того, что некрасиво выглядит(ИМХО), так он еще и
выравнивается несколько странно... Т.е. где-то выше, где-то ниже.
Поэтому для решения этой проблемы я использую относительное позиционирование:
position: relative; top: 1px;
Это спасает. НО! В Opera я заметил такую фишку, что при наложении
такого кода на любой другой элемент, например,
на бордюр таблицы, границы просто становятся невидимыми:(
Выйти из этого положения можно следующим способом: дописать
"z-index". Т.е. у нас получается:
position: relative; top: 1px; z-index: 1;
Далее идут различия в кнопках. Т.е. например, где-то текст кнопки
располагается выше на 1px, где-то ниже. Короче, это безобразие надо отслеживать.
А самое прикольное, что в Opera возможен такой глюк, что при использовании
DOCTYPE (хотя многие его не используют, но без него валидный код вам будет
только сниться:)), размеры кнопок странно отображаются, т.е. для дорогой
Opera я указываю "height: 14px;", несмотря на то, что в других браузерах
стоит "height: 18px;", который и является реальной величиной.
