Slik aktiverer du CSS3 Border Radius i Internet Explorer 8 og under

CSS3 gir oss muligheten til å skape avrundede hjørner med border-radius . Men som du kanskje allerede vet, er denne nye funksjonen ikke gjenkjent i Internet Explorer 8 (IE8) og dens tidligere versjoner. Så når du bruker CSS3 Border Radius til et element, vises det fremdeles som en boks med spisse tips.

Du kan finne mange forskjellige råd på Internett som tyder på at du ignorerer IE8. Du ønsker at du kan gjøre det. Men hvis du jobber på et nettsted for en statlig institusjon eller en bank, kan du ikke ha valg. Du må fortsatt gjøre nettsiden så fin som den gjør i moderne nettlesere, som inkluderer muligheten til å bruke CSS3 Border Radius.

Hvis du virkelig må gjøre nettstedet ditt IE8-klart, mens du er i stand til å bruke CSS3-funksjonen, har vi bare tipset for deg.

CSS3Pie

CSS3Pie er en slags polypfyll for CSS3 dekorative funksjoner. Bortsett fra CSS3 Border Radius som vi skal diskutere i denne artikkelen, støtter CSS3Pie også Box Shadow and Gradients, selv om den er begrenset til Linear Gradient-typen.

Last ned CSS3Pie (her). Sett den inn i prosjektkatalogen din - jeg lagde den i css- mappen. Som du også kan se fra skjermbildet nedenfor, har jeg opprettet ett stilark så vel som en HTML-fil.

Åpne stilarket i kodeditor og sett ett av elementene i HTML-filen med avrundede hjørner, slik som:

 .border-radius {høyde: 100px; bredde: 100px; bakgrunnsfarge: # 2ecc71; -webkit-grense-radius: 50px; -moz-grense-radius: 50px; border-radius: 50px; } 

Da elementets bredde og høyde er begge 100px, og border-radius er satt til 50px, blir elementet en sirkel:

I IE8, som vi forventer, vil det fortsatt være en firkant (sukk), men ikke bekymre deg.

For å aktivere den avrundede behavior: url(css/pie.htc);, sett inn denne linjen: behavior: url(css/pie.htc);, som så.

 .border-radius {høyde: 100px; bredde: 100px; bakgrunnsfarge: # 2ecc71; -webkit-grense-radius: 50px; -moz-grense-radius: 50px; border-radius: 50px; oppførsel: url (css / pie.htc); } 

Legg merke til at filbanen i url() må være enten en absolutt bane eller i forhold til HTML-filen. Du kan også legge til denne linjen i en egen fil.

Du kan ha et stilark som er utpekt for Internet Explorer. Du kan sette behavior: url(css/pie.htc); i den filen, men sørg for at den er erklært i samme CSS-velg, slik som den.

 / * erklært i ie.css * / .border-radius {oppførsel: url (css / pie.htc); } 

Oppdater siden i IE8. Det avrundede hjørnet skulle nå tre i kraft (ta-da!). Det skal fungere i IE7 også.

Feilsøking

Internet Explorer kan oppføre seg uventet. Hvis dette ikke virker (kanskje det avrundede hjørnet ikke trer i kraft, eller det valgte elementet har forsvunnet), må du legge til position og zoom å løse problemet:

Bruke CSS3 Pie i WordPress

Du er ferdig med å sette nettstedet ditt i HTML-skjema. Du bruker også pie.htc på nettstedet for å aktivere CSS3 i IE8. På dette stadiet er du klar til å forvandle nettstedet til et fungerende WordPress-tema. I dette tilfellet, som WordPress er dynamisk, hvor sider kan tjene på forskjellige nettadresser, må vi angi en absolutt bane.

Du kan enten endre banen i CSS slik:

 .border-radius {behavior: url (http: // localhost / {website} / wp-content / themes / {the_theme} / css/pie.htc); stilling: relativ; zoom: 1; } 

Eller legg til interne stiler i header.php på denne måten:

Endelig tanke

Å ha kule ting som CSS3 Border Radius arbeid i IE8 er fascinerende, og CSS3Pie gjør det skje, samtidig som vi gir oss en mindre grunn til å hate IE8.

40 + kreative og vakre kredittkortdesigner

Kredittkort er et av de beste økonomiske verktøyene du har til rådighet, hvis de brukes riktig. Det er også en av de beste måtene å uttrykke deg selv - du liker, misliker, personlige preferanser, selv din personlige merkevare, hvis du vil.Det er mer enn bare et plastkort med en banklogo på den. Du ka

(Tekniske og design tips)

Generer CSS Quantity Queries med QQ Builder

Få utviklere vet om eller bruker CSS-spørringer på deres nettsider. Det er en ganske komplisert funksjon, men også nyttig når du har varierende elementer i en beholder .En kvantitetsforespørsel kan endre / oppdatere CSS-egenskaper basert på forhåndsdefinerte grenser for barnelementer . Hvis du for eksempel har mer enn tre elementer i en liste, kan du få skrifttypen mindre til å lagre rom. Et annet

(Tekniske og design tips)