10 Cel mai bun css hacks pentru a realiza cross-browser (decizii privind jquery), shublog

probleme de cross-browser-ul va fi o lungă perioadă de timp pentru a chinui mintea de dezvoltatori web, exact atâta timp cât acesta va lansa un browser, care va fi bucurat de toate, fără excepție (de exemplu - nu -. nn). Acum mai Gagne este IE6, IE7 parțial, la care se adauga nu jigni pe nimeni Imposer grămadă de muncă suplimentară.

Eu aduc în atenția dumneavoastră o selecție de CSS hacks, care va ajuta la a face viața mai ușoară și pentru a înțelege Zen realiza cross-browser.

Resetați setările CSS. Toate brauzrov incluse inițial unele stiluri CSS. De exemplu, cel mai rău exemplu de care este inerentă în cele mai multe (dacă nu toate) brazuerov, care definește defoltovye 10px marja pentru corp tag-ul, rezultând într-un trecut către interior mea pentru conținut se poticnește de la marginea browser-ului, care distruge ideea de design-ul original al formularului. Cel mai izbitor exemplu - site-ul magazinului notorii „Intersport“, sau mai degrabă ramura românească - nu sunt încă conștienți de faptul că marja poate fi resetat.
Eu folosesc de obicei, următoarea structură pentru a corecta parametrii deranjante:

html, corp, div, durata, applet, obiect, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
o, abbr, acronim, adresa, mare, cita, cod,
del, DFN, em, font, img, ins, kbd, q, s, samp,
mici, grevă, puternic, sub, sup, tt, var,
b, u, i, centru,
dl, dt, dd, ol, ul, li,
FIELDSET, formă, etichetă, legendă,
tabel, legendă, TBODY, TFOOT, dinlicitația, tr, th, marja td: 0;
padding: 0;
de frontieră: 0;
schiță: 0;
font-size: 100%;
vertical-align: linia de bază;
fundal: transparent;
>
corp
ol, ul
blockquote, q
blockquote: inainte, blockquote: după, q: inainte, q: după conținut: '';
conținut: nici unul;
>
/ * Amintiți-vă pentru a defini stiluri de focalizare! * /
: focus
/ * Amintiți-vă pentru a evidenția inserții într-un fel! * /
uri
del
/ * Tabelele încă mai au nevoie de 'cellspacing = "0",' în markup * /
masa de frontieră-colaps: colaps;
border-spațiere: 0;
>

Min-înălțime în IE. Internet Explorer 6 nu acceptă complet CSS min-înălțime, mai ales atunci când este atât de necesar. Corectat problema în acest fel:

selector min-height: 300px;
înălțime: auto; ! importantă
height: 300px;
>

$ Attr ( "A") ( "hideFocus", "adevărat") css ( "schiță", "nici unul") ..;

Transparență. Uneori trebuie să setați transparența blocurilor. Este simplu, dar, din păcate, nu în mod valabil:

Filtru selector: alpha (opacitate = 75);
-Moz-opacitate: .75;
opacitate: .75;
>

PNG transparență în IE6. Nu uita despre existența structurii:

img, div <
Filtru: progid: DXImageTransform.Microsoft.AlphaImageLoader (...);
>

Dar, pentru că este invalid, și, astfel, dacă setați png ca un fundal, acesta nu poate fi otpozitsionirovat și otripitit. Prin urmare, rekumenduetsya de a utiliza IE PNG Fix (citeste aici).

Modul de interpolare Bicubică pentru imaginea scalabilă. Sună tehnic și confuz, dar nimic complicat. Amintiți-vă în IE6 (și ca în IE7 prea), dacă plasați imaginea pe pagină și pentru a reduce dimensiunea sa, acesta este redus prin profit sau pierdere si arata ca Gagne? Deci, există o modalitate de a repara (dar, din păcate, este nevalid)

Derulând în IE. Prin ekslorerah implicit (a șasea cu precizie poate a șaptea), o bară de defilare verticală este întotdeauna afișată în browser-ul, chiar și atunci când nu există nici un conținut de pe pagină. Pur și simplu corectat.

Dublarea câmpurile în IE. Dacă există float: la stânga și a spus marginalizarea, marginalizarea în udavivaetsya ishachke. Tratament - display: inline (mai în detaliu prin referință).

PRE și nowrap în CSS. Citiți articolul cu același nume în link-ul.

: Clasa Hover pseudo pentru IE. Din moment ce fundul foarte strans, suporta doar tag-ul Hover o. Uneori, acest lucru este suficient (pentru că este posibil printr-un ecran: bloc pentru a activa comportamentul în div), și, uneori, nu este suficient deloc. Deciziile cu privire la CSS pentru acest lucru nu este, dar există pe jQuery. Creați o clasă de pe CSS (în cazul nostru cu numele classname), el va cere culoare, fundal, și așa mai departe, de bine, și adăugați codul pentru elementul dorit (în acest caz, este de li'shek)

$ ( 'Li Ul'). Hover (
Funcția () <
$ (Aceasta) .addClass ( 'classname');>,
Funcția () <
$ (Aceasta) .removeClass ( 'classname');
>
);

Pentru ziua de azi. De aceea, până când ne vom întâlni din nou, finalizarea cu succes a săptămânii!

Da =) de ce o resetare css greu și eu nu folosesc

nu, bine, în cazul în care un aspect spokkoynoy rezultat zanimaeshsya, atunci de ce nu, cod netak prea mult, în comparație cu rezultatul

faulted css și poate arunca într-un fișier separat. atunci nu va cheltui prea mult ochii ...
și în aspectul la alte site-uri, puteți pur și simplu și încărcați copie)

Ei bine, da, de obicei, în afară și tiv =)

Spune-mi te rog, de ce nu face acest lucru:

De ce lista toate etichetele? Explicați vă rugăm

pentru că nu toate și nu este deloc necesar. marginalizare și pading outlayn - este posibil, la toate, dar cu restul de a face acest lucru - este un nonsens.

Dacă pentru unele tag-ul nu prevede nici o proprietate, browser-ul le va ignora pur și simplu. Și pentru a crea un catalog al tuturor tag-uri și de a anula o grămadă de proprietate este prea mult pentru ei.

De exemplu, dacă fac acest lucru:
*
apoi tag-ul img, această proprietate va fi ignorate de către browser.

Hmm, atunci de ce nu. dar, în orice caz, este de frontiera nu va funcționa, deoarece este aproape întotdeauna un element de formular. Desigur, în cazul în care proiectul dumneavoastră și totul se face fără îndoială, atunci regulile, dar dacă e ceva care apoi merge de la mână - atunci nu va ști cine și cum să folosească dezvoltarea ta.

Simbolul * înseamnă toate etichetele. Așa că m-am întrebat întotdeauna dacă „toate“ tag-uri, sau au orice bug-uri în browsere diferite (de exemplu, un fel de tag-ul nu răspunde la *)?

Mi sa spus că, în versiunile mai vechi de FF nu au înțeles ce * (dar eu sunt interesat doar cele mai recente versiuni de browsere și doresc să impună cross-browser doar sub noua versiune)

De exemplu, pentru a face un buton butonul nu este apăsat în browser-ul Opera și nu a funcționat

Dar, în parte, am rezolvat această problemă, după cum urmează:

Adevărat să faceți clic pe butonul ar trebui să fie nu mai mult de 1 dată pe secundă. Dacă apăsați de câteva ori pe secundă, este tot la fel se întâmplă indentare)))

Alexander, îmi pare rău pentru offtopic te rog. Dar poate știi cum poți face o legătură, în loc de butonul pentru a trimite formularele? Nu este de a utiliza metoda de introducere sau butonul (am înfuriat întotdeauna aceste elemente, deoarece era imposibil să facă o perfectă cross-browser)

Există ceva de genul $ ( "selector") să prezinte () .; dar nu au avut încă timp pentru a citi documentația.

La naiba toate etichetele html au fost tăiate

Știu că există o problemă în * măgarii vechi, dar într-un fel nu este prea îngrijorat. principalul lucru care a fost adecvate în noul, dar nu este niciodată nu știu ce surprize așteaptă

apăsând pe - Oh, da, tema besyachaya.

și puteți încerca să trimită un standard de zhabaskriptom
pentru a trimite

dacă după zhkyuri, este necesar să se stabilească ideshnik de referință și, în teorie, să se înregistreze ceva de genul:

dar pe performanță nu poate răspunde, este necesar să se testeze un

Vă mulțumesc foarte mult pentru răspunsurile dumneavoastră. Voi încerca

nezachto! În cazul în care - scrie =)

$ Attr ( "A") ( "hideFocus", "adevărat") css ( "schiță", "nici unul") ..;
Deja funcționează ca fiecare.

Apropo, da. vă mulțumesc foarte mult pentru un koment practic, corectat

dacă nu ne ajuta, ca am un mod foarte simplu și banal
în cazul în care un fundal alb-negru. aici: