в данной статье я расскажу вам об основных принципах создания "мультибраузерного" сайта. под словом "мультибраузерный сайт" я подразумеваю сайт, определяющий браузер пользователя и, в зависимости от результата, использующий уникальные этому браузеру css стили. также я расскажу о некоторых проблемах, которые могут возникнуть при работе с браузерами.
значит так, что нам надо? а нам надо сделать так, чтобы сайт отображался в большинстве браузеров по возможности одинаково (к сожалению, абсолюта не добиться).
перво-наперво необходимо определить, в каких браузерах наш сайт должен отлично выглядеть. в моем варианте это: ie, opera, netscape и mozilla.
и сразу совет: старайтесь не использовать атрибуты , переложите эти обязанности на css... или на строковые элементы стиля aka style="*". хотя даже "style" стоит использовать только при крайней необходимости.
для решения этой интересной задачи я предлагаю следующее: использовать несколько стилей для разных браузеров. однако, я вам не советую просто универсально писать, т.к. получится хуже, но геморроя меньше:)
вот кодик, который я написал для своего сайта. так мы определяем, с каким браузером мы имеем дело:
function browser_define($agent)
{
if(ereg('msie ([0-9].[0-9]{1,2})',$agent)&&!ereg('opera ([0-9].[0-9]{1,2})',$agent)) $browser='ie';
elseif(ereg('opera',$agent)) $browser='opera';
elseif(ereg('netscape/',$agent)&&ereg('gecko/',$agent)) $browser='netscape';
elseif(ereg('gecko/',$agent)&&!ereg('netscape/',$agent)) $browser='mozilla';
else $browser='ie';
return $browser;
}
функция возвращает имя браузера. используем ее так:
<link rel="stylesheet" type="text/css" href="/css/<?=browser_define($_server['http_user_agent'])?>.css">
т.е., если, например, к нам зашли через ie, то скармливаем css файл по имени ie.css. можно сделать небольшую модернизацию и определять еще и версию браузера, но я в этом большого резона не увидел...
теперь, после того, как мы научились определять браузер юзера и использовать специфичный ему css файл, поговорим о различиях между этими браузерами.
вот наиболее важные нюансы, на которых стоит заострить внимание:
если используете комментарии в css файлах, то юзайте конструкцию /* комментарий */, но никак не # и не <!-- -->, т.к. mozilla и netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется, правда, в opera и ie все ок.
различное отображение тега <select>. в ie он будет смотреться наиболее презентабельным образом, а вот в других браузерах, он мало того, что некрасиво выглядит(имхо), так он еще и выравнивается несколько странно... т.е. где-то выше, где-то ниже. поэтому для решения этой проблемы я использую относительное позиционирование:
position: relative; top: 1px;
это спасает. но! в opera я заметил такую фишку, что при наложении такого кода на любой другой элемент, например, на бордюр таблицы, границы просто становятся невидимыми:( выйти из этого положения можно следующим способом: дописать "z-index". т.е. у нас получается:
position: relative; top: 1px; z-index: 1;
далее идут различия в кнопках. т.е. например, где-то текст кнопки располагается выше на 1px, где-то ниже. короче, это безобразие надо отслеживать. а самое прикольное, что в opera возможен такой глюк, что при использовании doctype (хотя многие его не используют, но без него валидный код вам будет только сниться:)), размеры кнопок странно отображаются, т.е. для дорогой opera я указываю "height: 14px;", несмотря на то, что в других браузерах стоит "height: 18px;", который и является реальной величиной.
будьте внимательны с размерами <input> и <textarea>. мною было найдено некоторые несоответствие в размерах в браузерах netscape и opera(7.6). самое интересное, что в opera 8 этого нет!
сокращайте слова в атрибуте "alt" при <img>, так как в mozilla этот текст "выйдет" за границы . эту фишку я заметил толька в mozilla, в других браузерах все было ок.
далее хочу напомнить, что использование для оформления скроллбара кода типа:
scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color
будет отображаться только в ie и производных от него. поэтому не удивляйтесь, что, зайдя в mozilla, вместо радостных тонов вы увидите серый скроллбар (в зависимости от темы оформления).
не юзайте следующий код:
leftmargin, marginwidth, topmargin, marginheight
подобные скармливают нам различные визуальные редакторы. точно знаю про namo webeditor(дааавно пользовался)
используйте для отступов документа код:
body { padding: 0; margin: 0; }
если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишите:
body { padding: 1px 0 1px 0; margin: 0; }
вы, наверное, спросите "а зачем margin: 0 нужен, ведь и без него все нормуль?" а я вам отвечу, что это просто необходимо для mozilla. а то вы будете ломать голову, почему же у вас там появились лишние отступы:)
вот в общем-то и все... дерзайте, и у вас все получится.
p.s. данная статья может содержать некоторые неточности, но суть, я думаю, вам понятна: 