Share
Internet Explorer - de vloek van het bestaan van de meeste webontwikkelaars. Tot 60% van uw ontwikkeling kan worden verspild door IE-specifieke bugs uit te proberen, wat niet echt een productief gebruik van uw tijd is. In deze tutorial leer je over de meest voorkomende IE-bugs en weergaveverschillen en hoe je ze gemakkelijk kunt squashen of ermee kunt omgaan.
Trouwens, als u niet zelf dit proces wilt doorlopen, of als u problemen ondervindt bij het oplossen van een bepaalde IE-bug, probeer dan de IE Browser Issue Correction-service op Envato Studio.
IE Browser Issue Correctiedienst op Envato Studio U kunt dit Envato Market-item ook handig vinden: Easy & Quick Browser Detection. Hiermee kunt u snel bepalen welke browser wordt gebruikt en meldingen weergeven of andere acties ondernemen op basis daarvan.
Gemakkelijke en snelle browserdetectie Het centreren van een element is waarschijnlijk iets wat elke webontwikkelaar moet doen tijdens het maken van een lay-out. De eenvoudigste en meest veelzijdige manier om een element te centreren is om gewoon toe te voegen marge: automatisch; naar het relevante element. De bovenstaande methode zorgt ervoor dat het element wordt gecentreerd ongeacht de resolutie en / of de breedte van de browser. IE 6 in eigenwijze modus beslist echter om dit op de meest ongelukkige manier mogelijk te behandelen: door het helemaal niet te hanteren.
Overweeg de volgende code:
#container border: solid 1px # 000; achtergrond: # 777; breedte: 400 px; hoogte: 160 px; marge: 30 px 0 0 30 px; #element background: # 95CFEF; rand: vast 1px # 36F; breedte: 300 px; hoogte: 100 px; marge: 30px auto;
De uitvoer die u zou verwachten:
Maar wat IE u feitelijk geeft:
Dit komt voornamelijk door IE6 in de quirks-modus en hieronder herkent de auto waarde die we ingesteld hebben op de marge eigendom. Gelukkig is dit eenvoudig te verhelpen.
De eenvoudigste en meest betrouwbare manier om inhoud voor IE6 en lager te centreren, is toepassen text-align: center naar het bovenliggende element en pas dan toe text-align: left naar het element dat moet worden gecentreerd om ervoor te zorgen dat de tekst erin correct is uitgelijnd.
#container border: solid 1px # 000; achtergrond: # 777; breedte: 400 px; hoogte: 160 px; marge: 30 px 0 0 30 px; text-align: center; #element background: # 95CFEF; rand: vast 1px # 36F; breedte: 300 px; hoogte: 100 px; marge: 30 px 0; text-align: left;
Bijna elke webontwikkelaar gebruikt lijsten om zijn navigatie te maken. Meestal maak je het container-element, maak je enkele links naar binnen en drijf je de ankers in de richting die hij wil en noem je het een dag. Meestal. IE besluit echter om het een stuk ingewikkelder te maken. Doorlezen via de volgende code:
ul lijststijl: geen; ul li a display: block; breedte: 130 px; hoogte: 30 px; text-align: center; kleur: #fff; zweven: links; achtergrond: # 95CFEF; rand: vast 1px # 36F; marge: 30px 5px;
Een standaard compatibele browser maakt het zo:
En de IE-schermafbeelding:
Geen prettige navigatie als je het mij vraagt. Gelukkig zijn er 2 oplossingen die u kunt proberen.
De gemakkelijkste manier om dit te bestrijden is door de li-elementen zelf te laten zweven in plaats van de ankerelementen. Voeg dit gewoon toe en je zou klaar moeten zijn.
ul li float: left;
De tweede manier is om toe te passen weergeven: inline naar het omhullende li-element. Naast het repareren van deze bug, herstelt het ook de hieronder genoemde bug met dubbele marge. Puristen houden er misschien niet van om blokelementen binnen inline-elementen te plaatsen.
ul li display: inline
Deze bug is waarschijnlijk een van de eersten die een beginnende webontwikkelaar zal tegenkomen en specifiek is voor Internet Explorer 6 en lager. Het triggeren ervan is net zo eenvoudig als een element laten zweven en dan een marge toepassen in de richting waarin het is gedreven. En voila! De marge wordt verdubbeld in de gerenderde uitvoer. Niet echt iets waar je naar uitkijkt terwijl je een perfecte pixellay-out creëert.
Overweeg deze code:
#element background: # 95CFEF; breedte: 300 px; hoogte: 100 px; zweven: links; marge: 30 px 0 0 30 px; rand: vast 1px # 36F;
Op browsers die voldoen aan standaarden, ziet dit er zo uit:
Maar hier is hoe IE 6 besluit om het te maken:
De oplossing voor deze specifieke bug is van toepassing weergeven: inline naar het gedreven element en alles werkt zoals het hoort. Onze vorige code verandert nu in:
#element background: # 95CFEF; breedte: 300 px; hoogte: 100 px; zweven: links; marge: 30 px 0 0 30 px; rand: vast 1px # 36F; weergave: inline;
Als onderdeel van het maken van een lay-out, moet u mogelijk elementen met zeer kleine hoogten maken als aangepaste randen voor elementen. Meestal hoeft u alleen maar toe te voegen hoogte: XXpx naar de verklaringen van de stijl en je moet gedaan worden. Of dat dacht je al. Controleer de pagina in IE en u zult waarschijnlijk een dubbele take doen.
Bekijk bijvoorbeeld de volgende code:
#element background: # 95CFEF; rand: vast 1px # 36F; breedte: 300 px; hoogte: 2px; marge: 30 px 0;
En de uitvoer is precies zoals verwacht: een element van 2 px met een rand van 1 px.
En in IE:
De oorzaak van deze bug is vrij eenvoudig: IE weigert simpelweg om een kleiner element dan de ingestelde lettergrootte te vergroten. Als u de lettergrootte eenvoudigweg op 0 instelt, kunt u een element zo klein en kort krijgen als u maar wilt.
#element background: # 95CFEF; rand: vast 1px # 36F; breedte: 300 px; hoogte: 2px; marge: 30 px 0; lettergrootte: 0;
De volgende beste manier om met deze bug om te gaan, is toepassen overloop verborgen naar het element zodat het instort tot de beoogde hoogte.
#element background: # 95CFEF; rand: vast 1px # 36F; breedte: 300 px; hoogte: 2px; marge: 30 px 0; overloop verborgen
Deze bug steekt zijn lelijke kop op als je in een lay-out de oudercontainer instelt overloop eigendom aan auto en plaats er een relatief gepositioneerd item in. Het relatief gepositioneerde item schendt de grenzen van zijn ouderelement en loopt naar buiten. Laat me demonstreren. Kijk de volgende code:
#element background: # 95CFEF; rand: vast 1px # 36F; breedte: 300 px; hoogte: 150 px; marge: 30 px 0; overloop: automatisch; #anotherelement background: # 555; breedte: 150 px; hoogte: 175 px; positie: relatief; marge: 30px;
En de verwachte output:
En de uitvoer van IE:
De gemakkelijkste manier om dit vervelende probleem op te lossen, is door het ouderelement ook relatief te positioneren.
#element background: # 95CFEF; rand: vast 1px # 36F; breedte: 300 px; hoogte: 150 px; marge: 30 px 0; overloop: automatisch; positie: relatief;
Misverkenning door Internet Explorer van het doosmodel is misschien zijn onvergeeflijke fout. IE 6 in semi-standaard compatibele modus onttrekt dit, maar dit probleem kan nog steeds worden geactiveerd door de quirks-modus.
Twee div elementen. Een met de fix toegepast en een zonder. Het verschil in breedte en hoogte is de som van de vullingen die aan elke kant zijn aangebracht.
Ik weet zeker dat het dilemma met het doosmodel geen uitleg of demonstratie behoeft, dus ik zal je de oplossing geven.
De kunst is om de breedte normaal in te stellen voor alle browsers die voldoen aan de standaarden, alleen IE5 / 6 als target en dan de gecorrigeerde breedte in te voeren. Dit is hoe je meestal zou doorgaan over:
#element width: 400px; hoogte: 150 px; opvulling: 50px;
Dit verandert nu in:
#element width: 400px; hoogte: 150 px; \ hoogte: 250 px; \ breedte: 500px
In wezen voeg je de padding toe aan de originele breedte en voer je deze naar IE 6. De fix target IE 6 alleen in de modus quirks, dus je hoeft je geen zorgen te maken over IE 6 in de normale modus, waardoor dingen worden verknoeid.
Het instellen van een minimale hoogte op een element is absoluut noodzakelijk bij het omzetten van een prachtig ontwerp in een pixel perfect ontwerp. Helaas, IE negeert volledig de min-height eigenschap in plaats daarvan de opgegeven hoogte als de minimumhoogte aannemen.
De oplossing is een hack gemaakt door Dustin Diaz. Het maakt gebruik van de !belangrijk verklaring om het te laten werken. Het fragment ziet er zo uit:
#element min-height: 150px; hoogte: auto! belangrijk; Hoogte: 150px;
De tweede manier is om voordeel te halen uit het feit dat IE child selectors niet kan ontleden.
#element min-height: 150px; hoogte: 150 px; html> body #element height: auto;
Een van de belangrijkste concepten voor het maken van tabelloze lay-outs met CSS is zwevende elementen. In de meeste gevallen behandelt IE6 dit met aplomb maar in sommige gevallen struikelt het. Wanneer het geconfronteerd wordt met onbreekbare inhoud of elementen waarvan de breedte de breedte van de ouder overschrijdt, veroorzaakt het de lay-outs. Ik zal het je laten zien.
Beschouw dit codefragment:
http://net.tutsplus.com/
#element, #anotherelement background: # 95CFEF; rand: vast 1px # 36F; breedte: 100 px; hoogte: 150 px; marge: 30px; opvulling: 10px; zweven: links; #container background: # C2DFEF; rand: vast 1px # 36F; breedte: 365 px; marge: 30px; opvulling: 5px; overloop: automatisch;
De verwachte uitvoer zoals bekeken in een browser die voldoet aan de standaarden:
In IE:
Zoals je ziet, breidt de eerste div zich uit om te passen in de content die uiteindelijk de lay-out breekt.
Er is geen elegante oplossing voor deze bug. De enige manier om de lay-out op te slaan, is toepassen overloop verborgen naar het element, maar ten koste van het knippen van de onbreekbare inhoud. De lay-out wordt opgeslagen, maar de extra inhoud niet.
#element background: # C2DFEF; rand: vast 1px # 36F; breedte: 365 px; marge: 30px; opvulling: 5px; overloop verborgen;
IE 6 voegt verticale spaties toe, zelfs geen wordt gespecificeerd in specifieke gevallen. Laten we eerst naar de code kijken.
ul margin: 0; padding: 0; list-style: none; li a background: # 95CFEF; weergave: blok;
Hoe het eruit zou moeten zien:
Wat IE ons geeft:
Gelukkig zijn er een overvloed aan oplossingen die je zou kunnen proberen.
De gemakkelijkste uitweg is om gewoon een breedte te definiëren voor de ankertags en voila! alles wordt gemaakt zoals het hoort. Het declareren van een breedte activeert de IE-specificatie van het element hasLayout eigendom. U kunt in plaats daarvan een hoogte definiëren als u dat wilt.
li a background: # 95CFEF; weergave: blok; breedte: 200 px;
De volgende methode is om het anker naar links te duwen en het dan te verwijderen.
li a background: # 95CFEF; zweven: links; vrij: links;
De derde methode is om toe te voegen weergeven: inline naar de omsluiting li element. Hiermee wordt ook de bug met dubbele marge hersteld zoals hierboven aangegeven.
li display: inline;
En daar heb je het: de negen meest voorkomende IE-rendering bugs, en hoe ze te pletten. Hopelijk heeft dit je wat bloed, zweet en tranen bespaard tijdens het debuggen van je volgende creatie. Ik zal regelmatig het commentaargedeelte bekijken; dus hier, als u problemen ondervindt bij het implementeren van de fixes die hier worden vermeld.
Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Happy codering!
Als je het zat bent om je haar uit te trekken vanwege verwarrende bugs, ga dan naar Envato Studio, waar je hulp kunt vragen aan zorgvuldig geselecteerde ontwikkelaars die graag bugs pletten en oplossingen zoeken!
Accentsconagua