Während die meisten gängigen Browsern die CSS (Cascading Style Sheets) Eigenschaft, die HTML-Elemente mit abgerundeten Ecken machen wird unterstützt , Internet Explorer 8 und unterhalb teilen nicht diese Funktion. Das hat viele Web-Entwickler auf der Suche nach einem eigenen Weg, um abgerundete Ecken in Internet Explorer ohne Zugabe von Overhead ihren Workflow bieten verlassen . Glücklicherweise gibt es mehrere JavaScript -Lösungen zur Verfügung , die das Verhalten der CSS -Eigenschaft border-radius simulieren. Anleitung
1
Beschäftigen ein Plugin wie jQuery Corner Plugin , wenn Sie ein Entwickler , die bereits verwendet jQuery auf seiner Seite sind . Laden Sie das Plugin und legen Sie die Datei (en) auf Ihrem Webserver , und dann , um sie zu verbinden im head-Tag auf Ihrer Seite. Zum Beispiel, wenn die Dateien im gleichen Verzeichnis wie die Seite sind:
Jetzt registrieren src="jquery-1.4.2.min.js"> ;
Jetzt registrieren src="jquery.corner.js">
Dann rufen Sie die jQuery-Funktion , die gehen , um die Ecken -Runde in Internet Explorer , entweder innerhalb eines script-Tag im Kopf der Seite oder in einer externen JavaScript-Datei . Mit jQuery Plugin Corner , könnte der Code wie folgt aussehen:
$ (" roundedBox . " ) Ecke ("bottom 20px ");
Der erste Abschnitt in Klammern bezeichnet die Zielelement ( . s ) , in diesem Fall Elemente mit der Klasse Namen " roundedBox . " Der zweite Abschnitt in Klammern ist für Optionen. Optionen gehören die Art der Ecke , um die Ecke oder Ecken betroffen sein und der Radius der Kurve.
2
Wählen Sie eine Stand-alone- Lösung , wie die CurvyCorners JavaScript-Bibliothek . Downloaden und Verknüpfung der Bibliothek im head-Tag der Seite. Zum Beispiel:
Jetzt registrieren src="curvycorners.js">
Dann definieren CSS border-radius Attribute für Elemente, die sollten haben abgerundete Ecken :
roundedBox . {
-webkit - border-radius : 20px ;
-moz- border-radius : 20px ; }
die erste Eigenschaft ist für WebKit-basierten Browsern wie Safari und Chrome , während der zweite ist für Mozilla -basierte Browser wie Firefox. CurvyCorners analysiert die CSS , erkennt diese Definitionen und wendet sie in Internet Explorer.
3
Profitieren Sie von HTML -Komponenten , ein Mechanismus, Microsoft , um dynamisches Verhalten in ihre Webseiten integrieren entwickelt. Die Komponenten sind einfach mit einem JavaScript-Dateien . Htc -Erweiterung, die nur Internet Explorer beeinflussen . Eine kostenlose . Htc -Datei, die ein Verhalten für die border-radius CSS-Eigenschaft hinzugefügt wird, wurde veröffentlicht. Laden Sie die Datei und legen Sie sie in einem leicht zugänglichen Ort auf dem Webspace , dann fügen Sie ein " Verhalten "-Eigenschaft , die auf die htc -Datei neben der CSS , die border-radius -Eigenschaft definiert . . . Zum Beispiel:
roundedBox {
-moz- border-radius : 20px ;
-webkit - border-radius : 20px ;
border- radius: 20px ;
Verhalten : url ( border- radius.htc ); }