Slik aktiverer du boksformatering i Internet Explorer 7 [Quicktip]

Vi har dekket CSS3-boksstørrelsen i en tidligere artikkel. Boksstørrelse, med verdien av border-box, tillater oss å beholde elementets bredde og høyde, uavhengig av tilleggsbelastningen og grensen den har.

Dette gjør det enklere å måle og definere elementstørrelse . CSS3-boksformatering vil imidlertid ikke fungere i Internet Explorer 7 (IE7) og tidligere versjoner, som du kan se nedenfor.

Begge kolonnene som du ser på skjermbildet ovenfor, har width, height, padding og box-sizing angitt. Men da IE8 ikke gjenkjenner egenskapen for box-sizing, blir den andre kolonnen presset ned når den totale bredden overskrider bredden på foreldrebeholderen .

Du må justere størrelsen for hver kolonne, slik at de passer inn i den, noe som kan være en veldig kjedelig oppgave, avhengig av antall elementer du må håndtere . Hvis nettstedet ditt skal støtte IE7 (uansett grunn), samtidig som du beholder CSS3-boksformat, kan du bruke følgende triks.

Boksens størrelse Polyfill

For å gjøre IE8 (og under) bekreft Box Size, kan vi bruke en polyfill. Denne polyfil kommer i form av en HTC-fil og er utviklet av Christian Schaefer. Last ned filen fra Github-depotet og sett den inn, for eksempel CSS-mappen din.

Opprett et CSS-stilark, dedikert til Internet Explorer. Legg til lenken i HTML-dokumentet på denne måten, så det blir bare servert i IE7.

Legg deretter følgende kode i ie.css . Denne CSS-regelen nedenfor vil gjelde box-sizing for alle elementene.

 * {oppførsel: url (css / boxsizing.htc); } 

Et par ting å merke seg når du bruker dette trikset:

Urlbanen til boxsizing.htc må være i forhold til HTML- filens plassering, ellers vil det ikke fungere.

Paul Irish har også et tips for å bruke box-sizing i pseudo-element med *:before, *:after . Men siden IE7 og IE6 ikke støtter pseudo-element, er det ingen grunn til å bruke pseudo-element selektorer i dette tilfellet. Og som du kan se over, tar vi ikke med dem i koden også.

Resultatet

Her har vi to kolonner med foreldrebeholderens bredde satt til 500px. Kolonnebredden er satt til 50%, slik at hver kolonne skal ha 250px bredde, selv om vi også angir polstring for den. La oss åpne Internet Explorer 7, og start utviklerverktøyet (F12).

Gå til kategorien Layout i utviklerverktøyet for å se kolonnestørrelsen i detalj. Du bør se at i IE7 inneholder kolonnen nå både polstring og grenser som en del av den totale størrelsen. I vårt tilfelle forblir boksbredden 250 px.

10 Nyttige Firefox Utviklerverktøy du bør vite

Firefox som "utviklerens nettleser" har mange gode verktøy for å gjøre arbeidet enklere. Du kan finne mer på verktøysamlingen på Firefox-utviklerverktøyets nettside, og kan også prøve utviklerutgave-nettleseren som har flere funksjoner og verktøy som blir testet.For dette innlegget har jeg listet 10 nyttige verktøy du kanskje vil ha fra samlingen av utviklerverktøy. Jeg har og

(Tekniske og design tips)

10 måter Internett er Gaming Real Life (for bedre eller verre)

Helt siden begynnelsen av moderne spill har vi vært litt mer tiltrukket av verdener som etterligner livet, i stedet for å forandre reglene. Spillene er mer gripende når de gir oss tilgang til hjørner av den virkelige verden som vi ellers ikke kan engasjere seg med, eller når de lar oss ta avgjørelser som ellers ikke er våre til å lage (som å bygge skyliner og samfunn i SimCity ), eller ville få oss i trøbbel hvis vi skulle lage dem (som glede i Grand Theft Auto).Det er det

(Tekniske og design tips)