Share
Internet Explorer - rădăcina existenței celor mai mulți dezvoltatori web. Până la 60% din evoluția dvs. poate fi risipită doar încercând să distrugeți bug-urile specifice IE, care nu reprezintă o utilizare eficientă a timpului dvs. În acest tutorial, veți afla despre cele mai frecvente bug-uri IE și denaturarea disparităților și cum să le distrugeți cu ușurință sau să le rezolvați.
Apropo, dacă nu doriți să treceți singur prin acest proces sau dacă aveți probleme cu fixarea unui anumit bug IE, încercați serviciul IE Browser Correction Issue pe Envato Studio.
IE Serviciul de corecție a problemelor legate de browserul Envato Studio Alternativ, puteți găsi acest element Envato Market util: Detectarea ușoară și rapidă a browserului. Vă permite să stabiliți rapid ce browser este utilizat și să afișați notificări sau să faceți alte acțiuni bazate pe acestea.
Detectarea ușoară și rapidă a browserului Centrarea unui element este, probabil, ceva ce fiecare dezvoltator web trebuie să facă în timp ce creează un aspect. Cea mai simplă și mai versatilă cale de a centra un element este de a adăuga doar marja: auto; la elementul relevant. Metoda de mai sus va avea grijă de centrarea elementului, indiferent de rezoluția și / sau lățimea browserului. Modul IE 6 în modul quirks decide totuși să o facă în modul cel mai nefericit posibil: prin faptul că nu o manipulează deloc.
Luați în considerare următorul cod:
#container border: solid 1px # 000; fundal: # 777; lățime: 400px; înălțime: 160px; margine: 30px 0 0 30px; #element background: # 95CFEF; frontieră: solid 1px # 36F; lățime: 300px; înălțime: 100px; margine: 30 pixeli automat;
Producția pe care v-ați aștepta:
Dar ce îți dă IE:
Acest lucru se datorează în principal IE6 în modul quirks și mai jos nu recunoaște auto valoarea pe care am setat-o la margine proprietate. Din fericire, acest lucru este ușor de stabilit.
Cea mai ușoară și cea mai fiabilă modalitate de a centraliza conținutul pentru IE6 și mai jos este să aplicați text-align: centru la elementul părinte și apoi aplicați text-aliniere: stânga la elementul care trebuie centrat pentru a vă asigura că textul din cadrul acestuia este aliniat corespunzător.
#container border: solid 1px # 000; fundal: # 777; lățime: 400px; înălțime: 160px; margine: 30px 0 0 30px; text-align: centru; #element background: # 95CFEF; frontieră: solid 1px # 36F; lățime: 300px; înălțime: 100px; margine: 30px 0; text-aliniere: stânga;
Aproape fiecare dezvoltator web utilizează liste pentru a-și crea navigația. De obicei, creați elementul container, creați niște linkuri în interior și apoi plutiți ancorele în direcția pe care o dorește și o numește o zi. De obicei. IE, totuși, decide să o facă mult mai complicată. Peruseți prin următorul cod:
ul stil-style: none; ul li a afișare: bloc; lățime: 130px; înălțime: 30px; text-align: centru; culoare: #fff; plutește la stânga; fundal: # 95CFEF; frontieră: solid 1px # 36F; margine: 30px 5px;
Un browser compatibil standard face ca acesta să fie:
Și ecranul IE împușcat:
Nu este o navigație deosebit de plăcută dacă mă întrebi. Din fericire, există 2 soluții pe care le puteți încerca.
Cea mai ușoară modalitate de a combate acest lucru este de a flota elementele li în loc de elementele de ancorare. Doar adăugați acest lucru și ar trebui să fii făcut.
ul li float: stânga;
A doua modalitate este de a aplica afișare: inline la elementul de închidere li. În plus față de remedierea acestei erori, aceasta remediază și eroarea de marjă dublă menționată mai jos. Puristii ar putea sa nu placa sa introduca elemente de bloc in interiorul elementelor inline.
ul li afișare: inline
Acest bug este, probabil, printre primii pe care un dezvoltator web care începe să se întâlnească și este specific pentru Internet Explorer 6 și mai jos. Declanșarea este la fel de simplă ca un element care plutește și apoi se aplică o marjă în direcția în care a plutit. Și voila! Marja va fi dublată la ieșirea randată. Nu este cu adevărat ceva care ar fi de așteptat să creați în același timp un aspect pixel perfect.
Luați în considerare acest cod:
#element background: # 95CFEF; lățime: 300px; înălțime: 100px; plutește la stânga; margine: 30px 0 0 30px; frontieră: solid 1px # 36F;
Pe browserele compatibile cu standardele, așa arată:
Dar iată cum IE 6 decide să o facă:
Se aplică remedierea acestei erori specifice afișare: inline la elementul plutitor și totul funcționează așa cum se presupune. Codul nostru anterior se modifică acum la:
#element background: # 95CFEF; lățime: 300px; înălțime: 100px; plutește la stânga; margine: 30px 0 0 30px; frontieră: solid 1px # 36F; afișare: inline;
Ca parte a creării unui aspect, este posibil să fie nevoie să creați elemente cu înălțimi foarte mici ca granițe personalizate pentru elemente. De obicei, trebuie doar să adăugați înălțime: XXpx la declarațiile stilului și ar trebui să fii făcut. Sau așa ai crezut. Verificați pagina în IE și probabil veți face o dublă preluare.
De exemplu, uitați-vă la următorul cod:
#element background: # 95CFEF; frontieră: solid 1px # 36F; lățime: 300px; înălțime: 2px; margine: 30px 0;
Iar rezultatul este la fel de așteptat: un element cu 2 px și o graniță de 1 px.
Și în IE:
Cauza acestui bug este destul de simplă: IE refuză pur și simplu să dimensiunea unui element mai mic decât dimensiunea fontului setat. Pur și simplu setarea dimensiunii fontului la 0 vă permite să aveți un element cât mai mic și mai scurt pe cât doriți.
#element background: # 95CFEF; frontieră: solid 1px # 36F; lățime: 300px; înălțime: 2px; margine: 30px 0; font-size: 0;
Următoarea modalitate de a rezolva această problemă este să aplicați overflow: ascuns la element astfel încât să se prăbușească la înălțimea dorită.
#element background: # 95CFEF; frontieră: solid 1px # 36F; lățime: 300px; înălțime: 2px; margine: 30px 0; overflow: hidden
Această problemă își amintește capul urât atunci când într-un aspect stabiliți containerul părintelui revărsare proprietate la auto și plasați un element relativ poziționat în interiorul acestuia. Elementul relativ poziționat încalcă limitele elementului părinte și depășește exteriorul. Lasă-mă să demonstrez. Uită-te la următorul cod:
#element background: # 95CFEF; frontieră: solid 1px # 36F; lățime: 300px; înălțime: 150px; margine: 30px 0; overflow: auto; #anotherelement background: # 555; lățime: 150px; înălțime: 175px; poziție: relativă; margine: 30px;
Iar rezultatul așteptat:
IE de ieșire:
Cea mai ușoară modalitate de a repara acest bug enervant este de a poziționa relativ elementul părinte.
#element background: # 95CFEF; frontieră: solid 1px # 36F; lățime: 300px; înălțime: 150px; margine: 30px 0; overflow: auto; poziție: relativă;
Interpretarea greșită a modelului de cutie de către Internet Explorer este, probabil, greșeala ei de neiertat. Modul IE 6 în modul compatibil cu semistandardul stăpânește acest lucru, dar această problemă poate fi declanșată de modul quirks.
Două elemente div. Unul cu fixul aplicat și unul fără. Diferența dintre lățimea și înălțimea este suma plăcuțelor aplicate pe fiecare parte.
Sunt sigur că problema cu modelul cutiei nu are nevoie nici de explicații, nici de demonstrații, așa că vă voi da doar o soluție.
Trucul este de a seta lățimea în mod normal pentru toate browserele care respectă standardele, direcționați singur IE5 / 6 și apoi alimentați lățimea corectată. Acesta este modul în care ați proceda de obicei:
#element width: 400px; înălțime: 150px; padding: 50px;
Acest lucru se schimbă acum la:
#element width: 400px; înălțime: 150px; \ height: 250px; \ width: 500px
În esență, adăugați padding-ul la lățimea originală și îl alimentați cu IE 6. Fix fixează IE 6 în modul quirks singur, deci nu trebuie să vă faceți griji cu privire la IE 6 în modul normal,.
Setarea unei înălțimi minime la un element este absolut imperativă atunci când încerci să transformi un design frumos într-un design perfect pixel. Din păcate, IE ignoră complet min înălțime proprietate, luând în schimb înălțimea declarată ca înălțime minimă.
Fixul este un hack creat de Dustin Diaz. Utilizează !important pentru a face acest lucru. Fragmentul arată astfel:
#element min-height: 150px; înălțime: auto! important; height: 150px;
Cea de-a doua modalitate este de a profita de faptul că IE nu poate analiza selectorii pentru copii.
#element min-height: 150px; înălțime: 150px; html> corp #element height: auto;
Unul dintre conceptele importante de a construi planuri fără tabel folosind CSS este elemente plutitoare. În cele mai multe cazuri, IE6 se ocupă de acest lucru cu aplomb, dar în anumite cazuri se mișcă. Atunci când se confruntă cu un conținut nedetectabil sau elemente a căror lățime depășește lățimea părinților lui, aceasta provoacă dezastru cu layouts. Lasa-ma sa-ti arat.
Luați în considerare această bucată de cod:
http://net.tutsplus.com/
#element, #anotherelement fundal: # 95CFEF; frontieră: solid 1px # 36F; lățime: 100px; înălțime: 150px; margine: 30px; padding: 10px; plutește la stânga; #container background: # C2DFEF; frontieră: solid 1px # 36F; lățime: 365px; margine: 30px; padding: 5px; overflow: auto;
Producția așteptată vizualizată pe un browser compatibil cu standardele:
În IE:
După cum puteți vedea, primul div se extinde pentru a se potrivi conținutului care în cele din urmă încalcă aspectul.
Nu există un remediu elegant pentru această eroare. Singura modalitate de a salva aspectul este de a aplica overflow: ascuns la element, dar cu prețul tăierii conținutului nedetectabil. Aspectul va fi salvat, dar conținutul suplimentar nu va fi.
#element background: # C2DFEF; frontieră: solid 1px # 36F; lățime: 365px; margine: 30px; padding: 5px; overflow: ascuns;
IE 6 adaugă spațierea verticală chiar și în cazuri specifice nu este specificat niciunul. Să ne uităm mai întâi la cod.
ul marja: 0; padding: 0; list-style: none; li a background: # 95CFEF; afișare: bloc;
Cum ar trebui să arate:
Ce ne dă IE:
Din fericire, există o mulțime de remedii pe care le puteți încerca.
Cea mai ușoară cale de ieșire este de a defini doar o lățime pentru etichetele de ancorare și voila! totul se transformă așa cum ar trebui. Declarația unei lățimi declanșează specificul IE al elementului hasLayout proprietate. În schimb, puteți defini o înălțime dacă doriți.
li a background: # 95CFEF; afișare: bloc; lățime: 200px;
Următoarea metodă este să flotați ancora stânga și apoi să o ștergeți.
li a background: # 95CFEF; plutește la stânga; clar: stânga;
A treia metodă este de a adăuga afișare: inline la închidere Li element. De asemenea, aceasta remediază eroarea de marjă dublă, după cum sa menționat mai sus.
li afișare: inline;
Și acolo o aveți: cele mai multe dintre cele mai comune erori de redare IE și cum să le distrugeți. Sperăm că acest lucru ți-a salvat sânge, transpirație și lacrimi în timp ce depanați următoarea creație. Voi viziona frecvent secțiunea de comentarii; prindeți-vă aici, dacă întâmpinați dificultăți în implementarea remedierilor menționate aici.
Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!
Dacă te-ai săturat să-ți tragi părul din cauza unor bug-uri confuze, verifică Envato Studio unde poți să ceri ajutor de la dezvoltatorii care au ales mana care iubește bug-uri și face corecții!
Accentsconagua