Mens de fleste større browsere understøtter CSS (Cascading Style Sheets ) ejendom , som vil gøre HTML-elementer med buede hjørner , Internet Explorer 8 og under ikke deler denne funktion. Det har efterladt mange webudviklere søger efter en separat måde at tilbyde buede hjørner i Internet Explorer uden at tilføje overhead til deres arbejdsgange . Heldigvis er der flere JavaScript -løsninger til rådighed, der simulerer opførslen af CSS grænse - radius ejendom. Instruktioner
1
Ansæt et plugin som jQuery Corner Plugin , hvis du er en udvikler, der bruger allerede jQuery på sin hjemmeside . Download plugin og placere filen (r ) på din webserver , og derefter linke til dem i hovedet tag på din side. For eksempel, hvis filerne er i samme mappe som den side : ;
Så ring jQuery funktion, der kommer til at afrunde hjørnerne i Internet Explorer , enten inden for et script -tag i hovedet på siden eller i en ekstern JavaScript fil. Med jQuery Corner Plugin , kan koden se sådan ud : Hej
$ (" roundedBox "). Hjørne ( "bottom 20px ")
Det første afsnit i parentes angiver målet element ( . s ) , i dette tilfælde elementer med klassen navnet " roundedBox ". Det andet afsnit i parentes er muligheder. Indstillinger omfatter typen af hjørnet, til hjørnet eller hjørner, blive påvirket, og radius af kurven.
2
Vælg en stand- alone løsning , såsom CurvyCorners JavaScript biblioteket. Download og linke til biblioteket i hovedet tag på din side. For eksempel : Hej
Så definerer CSS border- radius attributter for elementer, der bør har afrundede hjørner:
roundedBox . {
- webKit - border- radius: 20px ;
- moz - border- radius: 20px ;
}
første ejendom er til WebKit - baserede browsere , herunder Safari og Chrome, mens den anden er til Mozilla -baserede browsere som Firefox. CurvyCorners parser CSS, registrerer disse definitioner og anvender dem i Internet Explorer.
3
Udnyt HTML komponenter , en mekanisme, som Microsoft udviklede til at indarbejde dynamiske opførsel i sine websider. Komponenter er simpelthen JavaScript-filer med en . Htc udvidelse , der påvirker kun Internet Explorer. En gratis . Htc fil, der tilføjer en adfærd for border- radius CSS ejendom er blevet frigivet. Download filen og placere den i et tilgængeligt sted på webhotellet , så tilføje en "adfærd " ejendom , der peger på htc -filen sammen med CSS , der definerer grænsen - radius ejendom. . . For eksempel : Hej
roundedBox {
- moz - border- radius: 20px ;
- WebKit - border- radius: 20px ;
border- radius: 20px ;
adfærd: url ( border - radius.htc )
}