www.romver.ru
/ Полный список статей / Мультибраузерный сайт: как его сделать

Как заказать сайт


АБРАКАДАБРА (Тоже самое но в читаемом виде)

Creator, http://www.internet-technologies.ru/

V dannoy stat'e a rasskaju vam ob osnovnix principax sozdania "mul'tibrauzernogo" sayta. Pod slovom "mul'tibrauzerniy sayt" a podrazumevau sayt, opredelau6iy brauzer pol'zovatela i, v zavisimosti ot rezul'tata, ispol'zuu6iy unikal'nie etomu brauzeru CSS stili. Takje a rasskaju o nekotorix problemax, kotorie mogut vozniknut' pri rabote s brauzerami.

Zna4it tak, 4to nam nado? A nam nado sdelat' tak, 4tobi sayt otobrajalsa v bol'6instve brauzerov po vozmojnosti odinakovo (k sojaleniu, absoluta ne dobit'sa).

Pervo-napervo neobxodimo opredelit', v kakix brauzerax na6 sayt doljen otli4no vigladet'. V moem variante eto: IE, Opera, Netscape i Mozilla.

I srazu sovet: staraytes' ne ispol'zovat' atributi , perelojite eti obazannosti na CSS... ili na strokovie elementi stila aka style="*". Xota daje "style" stoit ispol'zovat' tol'ko pri krayney neobxodimosti.

Dla re6enia etoy interesnoy zada4i a predlagau sleduu6ee: ispol'zovat' neskol'ko stiley dla raznix brauzerov. Odnako, a vam ne sovetuu prosto universal'no pisat', t.k. polu4itsa xuje, no gemorroa men'6e:)

Vot kodik, kotoriy a napisal dla svoego sayta. Tak mi opredelaem, s kakim brauzerom mi imeem delo:

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;
}

Funkcia vozvra6aet ima brauzera. Ispol'zuem ee tak:

<LINK rel="stylesheet" type="text/css" href="/css/<?=browser_define($_SERVER['HTTP_USER_AGENT'])?>.css">

T.e., esli, naprimer, k nam za6li 4erez IE, to skarmlivaem CSS fayl po imeni ie.css. Mojno sdelat' nebol'6uu modernizaciu i opredelat' e6e i versiu brauzera, no a v etom bol'6ogo rezona ne uvidel...

Teper', posle togo, kak mi nau4ilis' opredelat' brauzer uzera i ispol'zovat' specifi4niy emu CSS fayl, pogovorim o razli4iax mejdu etimi brauzerami.

Vot naibolee vajnie nuansi, na kotorix stoit zaostrit' vnimanie:

  1. Esli ispol'zuete kommentarii v CSS faylax, to uzayte konstrukciu /* kommentariy */, no nikak ne # i ne <!-- -->, t.k. Mozilla i Netscape stranno reagiruut na nix, poetomu sleduu6iy za kommentariem element stila prosto ignoriruetsa, pravda, v Opera i IE vse OK.
  2. Razli4noe otobrajenie tega <select>. V IE on budet smotret'sa naibolee prezentabel'nim obrazom, a vot v drugix brauzerax, on malo togo, 4to nekrasivo vigladit(IMXO), tak on e6e i viravnivaetsa neskol'ko stranno... T.e. gde-to vi6e, gde-to nije. Poetomu dla re6enia etoy problemi a ispol'zuu otnositel'noe pozicionirovanie:

    position: relative; top: 1px;

    Eto spasaet. NO! V Opera a zametil takuu fi6ku, 4to pri nalojenii takogo koda na luboy drugoy element, naprimer, na bordur tablici, granici prosto stanovatsa nevidimimi:( Viyti iz etogo polojenia mojno sleduu6im sposobom: dopisat' "z-index". T.e. u nas polu4aetsa:

    position: relative; top: 1px; z-index: 1;

  3. Dalee idut razli4ia v knopkax. T.e. naprimer, gde-to tekst knopki raspolagaetsa vi6e na 1px, gde-to nije. Koro4e, eto bezobrazie nado otslejivat'. A samoe prikol'noe, 4to v Opera vozmojen takoy gluk, 4to pri ispol'zovanii DOCTYPE (xota mnogie ego ne ispol'zuut, no bez nego validniy kod vam budet tol'ko snit'sa:)), razmeri knopok stranno otobrajautsa, t.e. dla dorogoy Opera a ukazivau "height: 14px;", nesmotra na to, 4to v drugix brauzerax stoit "height: 18px;", kotoriy i avlaetsa real'noy veli4inoy.
  4. Bud'te vnimatel'ni s razmerami <input> i <textarea>. Mnou bilo naydeno nekotorie nesootvetstvie v razmerax v brauzerax Netscape i Opera(7.6). Samoe interesnoe, 4to v Opera 8 etogo net!
  5. Sokra6ayte slova v atribute "ALT" pri <img>, tak kak v Mozilla etot tekst "viydet" za granici . Etu fi6ku a zametil tol'ka v Mozilla, v drugix brauzerax vse bilo OK.
  6. Dalee xo4u napomnit', 4to ispol'zovanie dla oformlenia skrollbara koda tipa:

    scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color

    budet otobrajat'sa tol'ko v IE i proizvodnix ot nego. Poetomu ne udivlaytes', 4to, zayda v Mozilla, vmesto radostnix tonov vi uvidite seriy skrollbar (v zavisimosti ot temi oformlenia).

  7. Ne uzayte sleduu6iy kod:

    leftmargin, marginwidth, topmargin, marginheight

    podobnie skarmlivaut nam razli4nie vizual'nie redaktori. To4no znau pro Namo WebEditor(daaavno pol'zovalsa)

    Ispol'zuyte dla otstupov dokumenta kod:

    BODY { padding: 0; margin: 0; }

    Esli je vi xotite sdelat' otstup v 1px sverxu i snizu, to prosto napi6ite:

    BODY { padding: 1px 0 1px 0; margin: 0; }

    Vi, navernoe, sprosite "A za4em margin: 0 nujen, ved' i bez nego vse normul'?" A a vam otve4u, 4to eto prosto neobxodimo dla Mozilla. A to vi budete lomat' golovu, po4emu je u vas tam poavilis' li6nie otstupi:)

Vot v ob6em-to i vse... Derzayte, i u vas vse polu4itsa.

P.S. Dannaa stat'a mojet soderjat' nekotorie neto4nosti, no sut', a dumau, vam ponatna: ;-)

citforum.ru/internet/html/multibrowser/

3
Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(812) 984 5721

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2020 romver.ru

Полная карта сайта Display Pagerank