Internet Explorer is een probleem dat de levens van de meeste webontwikkelaars verpest. Meer dan 60% van de ontwikkelingstijd kan worden besteed aan het oplossen van deze specifieke problemen, maar dat is niet het geval effectief gebruik tijd. In dit artikel zal ik het hebben over de meest populaire bugs en inconsistenties in de positionering, en hoe je deze problemen het gemakkelijkst kunt oplossen.

1. Middenpositie.

Elke webontwikkelaar werd bij het ontwerpen van een website geconfronteerd met de noodzaak om een ​​element in het midden uit te lijnen. De eenvoudigste en populaire manier- schrijfmarge: auto; . Met deze methode kunt u een element centreren, ongeacht de schermresolutie. Deze methode werkt echter niet in IE6.

Beschouw de volgende code:

#container ( rand: effen 1px #000; achtergrond: #777; breedte: 400px; hoogte: 160px; marge: 30px 0 0 30px; ) #element ( achtergrond: #95CFEF; rand: effen 1px #36F; breedte: 300px; hoogte: 100px; marge: 30px automatisch)

Verwacht resultaat:

Internet Explorer toont u echter het volgende:

Dit gebeurt omdat IE6 de automatische waarde die is ingesteld op de marge-eigenschap niet herkent. Gelukkig is dit eenvoudig op te lossen.

Laten we het oplossen.

De eenvoudigste en beproefde methode Om een ​​element in IE6 te centreren, schrijft u text-alignL center op het bovenliggende element en past u tex-align: left erop toe, zodat de inhoud ervan correct wordt uitgelijnd.

#container(rand: effen 1px #000; achtergrond: #777; breedte: 400px; hoogte: 160px; marge: 30px 0 0 30px; tekst uitlijnen: centreren;) #element( achtergrond: #95CFEF; rand: effen 1px #36F; breedte: 300px; hoogte: 100px; marge: 30px 0; tekst uitlijnen: links; }

2. Stapeffect

Bijna elke ontwikkelaar gebruikt lijsten om navigatie te creëren. Normaal gesproken wordt er een containerelement gemaakt, bevinden de benodigde koppelingen zich erin en wordt vervolgens de eigenschap float in de vereiste richting ingesteld. Beschouw het volgende voorbeeld:

Ul (lijststijl: geen;) ul li a (weergave: blok; breedte: 130px; hoogte: 30px; tekstuitlijning: midden; kleur: #fff; zwevend: links; achtergrond: #95CFEF; rand: effen 1px # 36F;marge: 30px 5px)

Wij krijgen het volgende:

IE zal ons echter laten zien:

Niet erg gebruiksvriendelijke navigatie, toch? Er zijn echter twee manieren om dit onaangename gedrag op te lossen.

1e methode

De eenvoudigste manier is om de eigenschap float niet in te stellen op links, maar op elementen van de li-lijst.

Ul li ( zweven: links; )

2e methode

De tweede manier is om de eigenschap display: inline toe te passen op het li-element. Daarnaast repareren we een bug met dubbele marge, die hieronder wordt beschreven.

Ul li (weergave: inline)

3. Dubbele inspringing voor elementen waarvan de eigenschap float is ingesteld

Het is heel gemakkelijk om deze fout te reproduceren. Zet het element op zweven: links en dan opvulling. Als resultaat krijgen we een inkeping die twee keer zo groot is als gespecificeerd.

Laten we eens kijken naar een voorbeeld:

#element( achtergrond: #95CFEF; breedte: 300px; hoogte: 100px; zwevend: links; marge: 30px 0 0 30px; rand: effen 1px #36F; )

Verwacht resultaat:

In IE6 zullen we echter het volgende zien:

Wij repareren het

Dit wordt op dezelfde manier gecorrigeerd als het probleem met het effect van stappen. Dat wil zeggen dat we de eigenschap display: inline voor het element instellen. Onze code zal als volgt veranderen:

#element( achtergrond: #95CFEF; breedte: 300px; hoogte: 100px; zwevend: links; marge: 30px 0 0 30px; rand: effen 1px #36F; weergave: inline; }

4. Elementen met kleine hoogte.

Soms is het nodig om elementen met een kleine hoogte te creëren, bijvoorbeeld om ze als designelement te gebruiken. De eerste manier die in me opkwam, was het instellen van de hoogte. IE zal u echter iets heel anders laten zien dan u verwacht.

Het resultaat is een element met een hoogte van 2px en een rand van 1px.

Laten we het oplossen.

De reden voor deze bug is heel eenvoudig: IE verandert eenvoudigweg de hoogte van het element naar een hoogte die gelijk is aan de lettergrootte. Daarom stellen we de lettergrootte eenvoudigweg in op nul.

#element( achtergrond: #95CFEF; rand: effen 1px #36F; breedte: 300px; hoogte: 2px; marge: 30px 0; lettergrootte: 0; }

Tweede benadering

Een andere goede manier- dit is om de overflow-eigenschap te gebruiken, u moet de verborgen waarde toepassen. En dan heeft het element de vereiste hoogte.

#element( achtergrond: #95CFEF; rand: effen 1px #36F; breedte: 300px; hoogte: 2px; marge: 30px 0; overloop: verborgen; }

5. Overloop en relatieve positionering van elementen.

Deze bug verschijnt wanneer het bovenliggende element de eigenschap overflow: auto heeft ingesteld, en het onderliggende element ten opzichte daarvan is gepositioneerd, dat wil zeggen, het is ingesteld op positie eigendom: relatief. Dat blijkt kind-element bevindt zich als het ware bovenop de ouder. Laten we eens kijken naar een voorbeeld:

#element( achtergrond: #95CFEF; rand: effen 1px #36F; breedte: 300px; hoogte: 150px; marge: 30px 0; overloop: auto; ) #anotherelement( achtergrond: #555; breedte: 150px; hoogte: 175px; positie : relatief; marge: 30px )

Verwacht resultaat:

Resultaat in IE:

Laten we het oplossen.

De eenvoudigste manier om het probleem op te lossen is door het bovenliggende element in te stellen relatieve positionering.

#element( achtergrond: #95CFEF; rand: effen 1px #36F; breedte: 300px; hoogte: 150px; marge: 30px 0; overloop: auto; positie: relatief; }

6. Box-model

Internet Explorer interpreteert het boxmodel verkeerd.

Er zijn er bijvoorbeeld 2 div-element. Eén met de bug opgelost en de andere niet. Er zal een verschil in grootte tussen beide zijn dat gelijk is aan de som van de interne opvullingen.

Wij repareren het

Ik zal je in een ander artikel over het juiste model vertellen, maar nu laat ik je alleen zien hoe je het kunt repareren.

Het punt is dat voor IE5/6 de hoogte en breedte apart ingesteld moeten worden. Ik doe het bijvoorbeeld zo:

Voor alle browsers

#element( breedte: 400px; hoogte: 150px; opvulling: 50px; )

Voor IE moet je dit doen:

#element ( breedte: 400px; hoogte: 150px; \hoogte: 250px; \breedte: 500px )

In wezen voegt u opvulwaarden toe aan de afmetingen van het element voor IE6.

7. Minimale maten instellen.

De minimale breedte en hoogte zijn daarbij simpelweg onvervangbaar mooi ontwerp. Helaas negeert IE de eigenschappen min-height en min-width.

Wij repareren het

Om het probleem op te lossen, gebruiken we de!important-identifier.

#element ( min-hoogte: 150px; hoogte: auto !belangrijk; hoogte: 150px; )

Tweede optie.

Als we rekening houden met het feit dat IE geneste selectors niet begrijpt, kunnen we dit doen:

#element ( min-hoogte: 150px; hoogte: 150px; ) html>body #element ( hoogte: auto; )

8. Onjuist gedrag in het vlottermodel.

Een van de belangrijkste concepten bij tabelloze lay-out met behulp van CSS is float. Meestal handelt IE6 dit correct af, maar soms zijn er problemen. Bijvoorbeeld als de inhoud niet-afbrekend is of als de breedte van het element groter is dan de breedte van het bovenliggende element. In deze gevallen wordt de opmaak afgebroken. Laten we een voorbeeld bekijken.

#element, #anotherelement( achtergrond: #95CFEF; rand: effen 1px #36F; breedte: 100px; hoogte: 150px; marge: 30px; opvulling: 10px; zwevend: links; ) #container( achtergrond: #C2DFEF; rand: effen 1px #36F; marge: 30px; overloop: automatisch)

Ik heb het in IE:

Zoals u kunt zien, is de eerste div uitgebreid om in de breedte van de inhoud te passen en is de aangrenzende div naar de volgende regel geduwd.

Wij repareren het

Er bestaat geen mooie oplossing. Maar je kunt bijvoorbeeld de eigenschap overflow:Hidden toepassen, maar dan wordt de inhoud afgekapt en is een deel ervan niet zichtbaar.

#element( achtergrond: #C2DFEF; rand: effen 1px #36F; breedte: 365px; marge: 30px; opvulling: 5px; overloop: verborgen; )

9. Extra ruimte tussen lijstitems.

IE 6 voegt extra opvulling toe aan verticale lijsten. Laten we eens kijken naar een voorbeeld.

• Verbinding 1
• Verbinding 2
• Verbinding 3

Ul ( marge:0; opvulling:0; lijststijl:none; ) li a ( achtergrond: #95CFEF; weergave: blok; )

Hoe het eruit zou moeten zien:

Wat IE laat zien:

1e methode

De eenvoudigste manier is om de breedte of hoogte van de link op te geven.

Li a (achtergrond: #95CFEF; weergave: blok; breedte: 200px; }

2e methode

De volgende manier is om de float in te stellen: links en vervolgens leeg te maken.

Li a (achtergrond: #95CFEF; zwevend: links; helder: links; }

3e methode

De derde manier is om de weergave in te stellen: inline op het li-element. Wat overigens de hierboven beschreven fout met de dubbele marge zal verhelpen.

Het gebruik van margin:auto om een ​​blokelement horizontaal te centreren is goed bekende methode. Maar heb je je ooit afgevraagd hoe het werkt?

Het effect van auto is afhankelijk van het elementtype en de context. Voor toppadding kan CSS auto twee dingen betekenen: alles in beslag nemen vrije ruimte of 0 pixels. Afhankelijk hiervan zal een andere structuur worden gespecificeerd.

"auto" - bezet alle beschikbare ruimte

Dit is de meest gebruikelijke manier om automatisch inspringen te gebruiken. Als we auto instellen voor de linker- en rechteropvulling van één element, nemen ze gelijkmatig alle beschikbare horizontale ruimte in de container in beslag. Hierdoor wordt het element in het midden geplaatst.

Bekijk voorbeeld

Dit werkt alleen voor horizontale opvulling. Maar dit werkt niet voor zwevende en inline-elementen. En ook voor absoluut en vast gepositioneerde elementen.

Simuleer zweefgedrag door beschikbare ruimte toe te wijzen

auto verdeelt alle vrije ruimte gelijkmatig tussen de rechter- en linkermarge. Maar wat gebeurt er als we deze waarde voor slechts één van de opvullingen instellen? Vervolgens neemt het alle beschikbare ruimte in beslag en wordt het element naar de rechter- of linkerrand verschoven.

Bekijk voorbeeld

“auto” — stel 0 pixels in

Zoals hierboven vermeld, werkt automatisch niet voor zwevende, inline of absoluut gepositioneerde elementen. Ze hebben al een gedefinieerde structuur, dus het heeft geen zin om de automatische marge te gebruiken.

Dit zal de oorspronkelijke structuur alleen maar verstoren. Inclusief CSS voor het inspringen van tekst bovenaan. Daarom stelt auto de opvulling van deze elementen in op 0 pixels.

auto werkt ook niet op een standaard blokelement, tenzij er een breedte is opgegeven. In alle voorbeelden die ik gaf, hadden de elementen een gespecificeerde breedte.

De waarde auto definieert een opvulling van 0 pixels wanneer de breedte van een blokelement is ingesteld op auto of 100% . Normaal gesproken neemt het de gehele breedte van de container in beslag, dus er blijven 0 pixels over voor de opvulbreedte.

Wat gebeurt er met verticale opvulling als deze op automatisch is ingesteld?

auto voor zowel de bovenste als de onderste opvulling van de CSS wordt altijd berekend als 0 pixels ( exclusief absoluut gepositioneerde elementen). De W3C-specificatie vermeldt het volgende:

"Als 'margin-top' of 'margin-bottom' is ingesteld op 'auto', worden deze op 0 gezet."

Dit komt door het feit dat op een webpagina alle elementen meestal verticaal worden verdeeld. Door de hoogte van een element in een container te centreren, bereiken we dus niet het feit dat het verticaal gecentreerd lijkt ten opzichte van de pagina zelf, zoals gebeurt bij horizontaal centreren.

Of misschien is het om dezelfde reden dat ze besloten een uitzondering toe te voegen voor absoluut gepositioneerde elementen die verticaal gecentreerd kunnen worden ten opzichte van de totale paginahoogte.

Of omdat het effect van het combineren van streepjes (samenvoegen van streepjes aangrenzende elementen ). Dit is nog een uitzondering hierop van deze regel het bepalen van verticale offsets.

Absoluut gepositioneerde elementen centreren

Omdat er een uitzondering is voor absoluut gepositioneerde elementen, kunt u auto gebruiken om ze verticaal en horizontaal te centreren. Maar eerst moeten we uitzoeken wanneer margin:auto precies zo zal werken voor CSS-toppadding.

Een andere W3C-specificatie zegt:

“Als alle drie de posities (“left”, “width” en “right”) zijn ingesteld op “auto”, stel dan eerst “margin-left” en “margin-right” in op 0...
» Als "auto" alleen is opgegeven voor "marge-links" en "marge-rechts", los dan de vergelijking op met aanvullende voorwaarde zodat beide opvullingen dezelfde breedte hebben."

De situatie met betrekking tot de automatische waarde voor horizontale opvulling wordt hier gedetailleerd beschreven. Om ervoor te zorgen dat deze opvullingen dezelfde grootte hebben, mogen left , width en right niet worden ingesteld op auto ( hun standaardwaarde). Om een ​​element horizontaal te centreren, moet u de breedte van het absoluut gepositioneerde element op een bepaalde waarde instellen, en moeten links en rechts gelijke waarden hebben.

In de specificatie ook vermeld iets soortgelijks voor de bovenste opvulling van de CSS-div.

"Als 'top', 'height' en 'bottom' zijn ingesteld op 'auto', stelt u 'top' in op statisch..."

"Als een van de drie posities niet is ingesteld op 'auto': als 'top' en 'bottom' zijn ingesteld op 'auto', los dan de vergelijking op met een extra voorwaarde om deze opvullingen op dezelfde waarden in te stellen."

Om een ​​absoluut gepositioneerd element verticaal te centreren, mogen top , height en bottom daarom niet op auto worden ingesteld.

Nu we dit allemaal samenvoegen, krijgen we het volgende:

Bekijk voorbeeld

Conclusie

Als u een element op een pagina naar rechts of links moet verplaatsen zonder containerelementen ( bijvoorbeeld, zoals in het geval van float), onthoud dat het mogelijk is om automatisch te gebruiken voor inspringen.

Een element alleen naar absoluut gepositioneerd converteren om het verticaal te centreren ( bovenste opvulling CSS), Niet beste idee. Er zijn andere opties zoals flexbox en CSS-transformatie die hiervoor beter geschikt zijn.

Vertaling van het artikel " CSS – marge automatisch – Hoe het werkt"werd opgesteld door het vriendelijke projectteam.

Goed slecht

Beschrijving

Stelt de hoeveelheid opvulling vanaf elke rand van het element in. De marge is de ruimte vanaf de rand van het huidige element tot de binnenrand van het bovenliggende element (Fig. 1).

Rijst. 1. Inspringen vanaf de linkerrand van het element

Als het element geen ouder heeft, is de opvulling de afstand van de rand van het element tot de rand van het browservenster, waarbij er rekening mee wordt gehouden dat voor het venster zelf ook standaard opvulling is ingesteld. Om ze te verwijderen, moet u de margewaarde voor de selector instellen gelijk aan nul.

Met de marge-eigenschap kunt u de margewaarde voor alle zijden van een element in één keer instellen of deze alleen voor specifieke zijden definiëren.

Syntaxis

marge: [waarde | interesse | automatisch] (1,4) | erven

Waarden

U kunt één, twee, drie of vier waarden gebruiken, gescheiden door een spatie. Het effect is afhankelijk van het aantal waarden en wordt weergegeven in tabel. 1.

De mate van inspringing kan worden opgegeven in pixels (px), percentage (%) of andere acceptabele waarden. CSS-eenheden. De waarde kan een positief of negatief getal zijn.

Auto Specificeert dat de mate van inspringing automatisch door de browser wordt berekend.

inherit Erft de waarde van de ouder.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Als u een minimum aan inspanning heeft, is uw inspanning niet meer dan een normaal gevolg. Resultaat dit voorbeeld

getoond in afb. 2.

Objectmodel

document.getElementById("elementID ").style.margin

Browsers

Internet Explorer 6 in de quirk-modus biedt geen ondersteuning voor het centreren van een blok met behulp van de automatische marge: 0-regel. Er zit ook een bug in deze browser waarbij de linker- of rechteropvullingswaarde wordt verdubbeld voor zwevende elementen die zijn genest in bovenliggende elementen. De marge die grenst aan de zijde van de ouder wordt verdubbeld. Het probleem wordt meestal opgelost door display: inline aan het zwevende element toe te voegen.

Internet Explorer-versies tot en met 7.0 ondersteunen de overervingswaarde niet.

Opmerking

U blok elementen verticaal naast elkaar geplaatst, wordt een instortend effect waargenomen wanneer de inspringingen niet worden opgeteld, maar met elkaar worden gecombineerd. De ineenstorting zelf werkt op twee of meer blokken (de ene kan in een andere worden genest) met inkepingen aan de boven- of onderkant, terwijl aangrenzende inkepingen tot één worden gecombineerd. Voor linker- en rechteropvulling wordt nooit samenvouwen toegepast.

Samenvouwen werkt niet:

• voor elementen waarvan de eigenschap opvulling is ingesteld op de samenvouwzijde.
• voor elementen waarvoor een grens is gespecificeerd aan de instortende zijde;
• op elementen met absolute positionering, d.w.z. degenen wier positie op absoluut is ingesteld;
• op zwevende elementen (waarvoor de eigenschap float is ingesteld op left of right );
• voor inline-elementen;
• Voor .

Over het algemeen centrerend HTML-elementen op de pagina - dit is geen moeilijke zaak. In sommige gevallen moeten webontwikkelaars hun hersens pijnigen om de beste oplossing te vinden.

Het horizontaal centreren van de elementen is verticaal niet zo moeilijk; het roept al vragen op, maar het combineren ervan kan in het algemeen een doodlopende weg zijn. In het tijdperk adaptief ontwerp zijn we zelden duidelijk over de exacte afmetingen van bepaalde elementen. Ik telde er 6 op verschillende manieren centreerelementen met met behulp van CSS. Laten we beginnen met eenvoudige voorbeelden, laten we eindigen met complexere. Het werkt met dezelfde HTML-code:

Horizontale uitlijning met behulp van tekstuitlijning

Soms is de eenvoudigste oplossing de beste:

Div.center (tekst uitlijnen: midden; achtergrond: hsl(0, 100%, 97%); ) div.center img ( breedte: 33%; hoogte: auto; )

Er is hier geen verticale centrering: hiervoor moet u de eigenschappen margin-top en margin-bottom aan de div toevoegen.

Centreren met marge: auto

Een andere oplossing voor horizontale uitlijning:

Div.center (achtergrond: hsl(60, 100%, 97%); ) div.center img (weergave: blok; breedte: 33%; hoogte: auto; marge: 0 auto; )

Houd er rekening mee dat u voor deze methode de weergave: block-eigenschap moet instellen.

Centreren met behulp van een tabelcel

Door display: table-cell te gebruiken, kunnen we ervoor zorgen dat het element zowel verticaal als horizontaal gecentreerd is. Maar hier moeten we de afbeelding in een ander div-element nesten.

Gecentreerd uitgelijnd ( weergave: tabel; achtergrond: hsl(120, 100%, 97%); breedte: 100%; ) .center-core ( weergave: tabelcel; tekst uitgelijnd: gecentreerd; verticaal uitgelijnd: midden; ) .center-core img ( breedte: 33%; hoogte: auto; )

Om alles correct te laten werken, moet de div worden ingesteld op breedte: 100%. Om het element verticaal te centreren, gebruiken we standaardtechnieken door de hoogte in te stellen. Werkt overal, inclusief IE8+.

Absolute uitlijning

Erg interessante oplossing. Het idee is dat je de hoogte van de buitencontainer moet instellen:

Absoluut uitgelijnd ( positie: relatief; min-hoogte: 500px; achtergrond: hsl(200, 100%, 97%); ) .absoluut uitgelijnd img ( breedte: 50%; min-breedte: 200px; hoogte: auto; overflow : automatisch; marge: automatisch; positie: boven: 0; onder: 0;

Centreren met behulp van vertalen

Nieuwe oplossing waar gebruikt CSS-transformaties. Biedt zowel horizontale als verticale uitlijning:

Midden ( achtergrond: hsl(180, 100%, 97%); positie: relatief; min-hoogte: 500px; ) .center img ( positie: absoluut; boven: 50%; links: 50%; transformeren: vertalen(-50 %, -50%); breedte: 30%; hoogte: automatisch)

Er zijn verschillende nadelen:

• Voor de CSS-transformatie-eigenschap zijn browservoorvoegsels vereist
• Werkt niet in oudere versies van IE (8 en lager)
• De buitencontainer dient een hoogte te krijgen.
• Als er tekst in de container staat, kan deze enigszins wazig zijn.

Centreren met behulp van het flexibele weergavetype

Waarschijnlijk de eenvoudigste optie.

Midden (achtergrond: hsl(240, 100%, 97%); weergave: flex; uitvullingsinhoud: midden; items uitlijnen: midden; ) .center img ( breedte: 30%; hoogte: auto; )

Werkt niet in alle versies van IE (hoewel je jezelf kunt beschermen door daarnaast display: table-cell te gebruiken). Volledige CSS:

Midden (achtergrond: hsl(240, 100%, 97%); weergave: -webkit-box; /* Safari, iOS 6 en eerdere versies; Android, oude WebKit */ weergave: -moz-box; /* Firefox (mogelijk met fouten) */ display: -ms-flexbox; /* IE 10 */ weergave: -webkit-flex; /* Chroom 21+ */ beeldscherm: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: midden; -moz-box-align: midden; -ms-flex-align: midden; -webkit-align-items: midden; items uitlijnen: centreren; -webkit-box-pack: midden; -moz-box-pack: midden; -ms-flex-pack: midden; -webkit-rechtvaardigen-inhoud: midden; rechtvaardigen-inhoud: centrum; )

Centreren met behulp van Calc

In sommige gevallen deze methode veelzijdiger dan het gebruik van flexbox:

Midden ( achtergrond: hsl(300, 100%, 97%); min-height: 600px; positie: relatief; ) .center img ( breedte: 40%; hoogte: auto; positie: absoluut; top:calc(50% - 20%); links: berekening(50% - 20%);

Het is heel eenvoudig, we kunnen de afmetingen berekenen die we nodig hebben, afhankelijk van de volledige pagina-indeling. De berekeningen zijn heel eenvoudig, 50% is dat ook middelpunt container, maar onze taak is om de linkerkant te plaatsen bovenste hoek afbeeldingen. Trek vervolgens de helft van de hoogte en breedte van de afbeelding af. De formule is als volgt:

Boven: berekening(50% - (40% / 2)); links: berekening(50% - (40% / 2));

In de praktijk zul je dat wellicht tegenkomen deze methode werkt prima als we de afmetingen van de elementen kennen:

Midden img ( breedte: 500px; hoogte: 500px; positie: absoluut; top:calc(50% - (300px / 2)); links: calc(50% - (300px - 2)); )

Deze methode wordt ondersteund door Firefox, vanaf versie 4 moet u browservoorvoegsels registreren. Werkt niet in IE 8. Volledige code:

Midden img ( breedte: 40%; hoogte: auto; positie: absoluut; bovenaan: -webkit-calc(50% - 20%); links: -webkit-calc(50% - 20%); bovenaan: -moz-calc (50% - 20%); links: -moz-calc(50% - 20%); bovenaan: calc(50% - 20%);

Ik hoop dat deze methoden voldoende zijn om de beste oplossing voor jezelf te vinden.