border-radius auch im IE
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abgerundete ecken
arbeiten
bild
code
duo
elite
erstellung
farbe
festlegen
generator
gleiche datei
hilfe
http
inhalt
radius
schatten
setzen
test
tool
url
-
Hallo,
ich habe gestern auf einer Testseite "border-radius" getestet. Diese Funktion funktioniert bei mir allerdings nur im Opera, aber nicht im IE.
Also habe ich im Internet nachgesucht, und habe heraus gefunden, dass es mit "PIE" geht. Oder gibt es andere Möglichkeiten?
Hier meine Testseite: http://php-oop.lima-city.de/test.php
Der Quelltext ist folgender:
<html> <head> <title>Test</title> <!--[if lte IE 8]> <style type="text/css"> .box {behavior:url(PIE.htc);} </style> <![endif]--> <style type="text/css"> <!-- .box { background-color: #FFFFFF; border-radius: 8px; margin: 0px 10px 10px; padding: 10px 20px; } --> </style> </head> <body bgcolor="#ededed"> <div class="box"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </body> </html>
Aber im IE wird die Box noch eckig dargestellt, also nicht rund.
Wie kann ich border-radius auch im IE verwenden? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
In der neusten Version vom IE funktioniert border-radius.htc (ist sehr wahrscheinlich vom Inhalt die gleiche Datei wie deine) leider nicht mehr. Du müsstest entweder mit Bildern arbeiten oder (ich weiß nicht ob das überhaupt möglich ist ) den IE in irgendeinen Kompatiblitätsmodus setzen.
-
kostenlose-javascripts schrieb:
In der neusten Version vom IE funktioniert border-radius.htc (ist sehr wahrscheinlich vom Inhalt die gleiche Datei wie deine) leider nicht mehr. Du müsstest entweder mit Bildern arbeiten oder (ich weiß nicht ob das überhaupt möglich ist ) den IE in irgendeinen Kompatiblitätsmodus setzen.
Danke für deine Antwort!
Dann werde ich wahrscheinlich mit Bildern arbeiten. -
Der IE 9 unterstützt Borderradius nur der IE 8 und älter nicht
-webkit-border-radius: 10px; border-radius: 10px;
Das funkt auch im IE9 -
php-oop schrieb:Dann werde ich wahrscheinlich mit Bildern arbeiten.
Würde ich dir sogar empfehlen. Es ist zwar eine doofe Arbeit, aber sie funktioniert zumindest in jedem Browser, auch älteren. Und wenn man sieht, dass XP User immernoch mit IE6/7/8 abhängen, höher geht nicht, wäre es schon empfehlenswert auch an diese zu denken, denn die sind oft benutzt, und ich glaube selbst der 8ter kennt kein Border-Radius. Ist also auf jedenfall sehr empfehlenswert, um Kompatibel zu allen zu bleiben, auch wenns nervt.
Liebe Grüße -
Und nicht für die alten Firefoxe das moz-prefix vergessen.
Hier der komplette Code:
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
ab IE9 wird der normale border-radius auch eingesetzt, ansonsten muss man mit Hintergrundbildern leben oder verzichten. -
kostenlose-javascripts schrieb:
Du müsstest entweder mit Bildern arbeiten oder (ich weiß nicht ob das überhaupt möglich ist ) den IE in irgendeinen Kompatiblitätsmodus setzen.
Du solltest dabei überlegen ob sich der Aufwand lohnt, besonders bei eher unwichtigen Design-Elementen kann man abwägen ob es auch die älteren Browser unterstützen sollen. Denn eine Bildlösung für abgerundete Ecken schluckt eben auch mehr Speicher als die einfache Lösung mit einfachen CSS3 Code.
Wenn du trotz dessen gerne auch die alten Browser unterstützen möchtest so verwende Browserweichen und biete allen aktuellen Browsern immer die Code-Variante an.
raphael811 schrieb:
Für BoxShadows gibt es hier einen schönen BoxShadow-Generator. Um die Erstellung eines Schattens zu vereinfachen, kann man in diesem Tool Farbe, sowie die Richtung des Schattens mit Hilfe von Schiebereglern festlegen.
@raphael811 es geht hier um abgerundete Ecken nicht um einen Schatteneffekt.
mfg Stephan -
daswing schrieb:
raphael811 schrieb:
Für BoxShadows gibt es hier einen schönen BoxShadow-Generator. Um die Erstellung eines Schattens zu vereinfachen, kann man in diesem Tool Farbe, sowie die Richtung des Schattens mit Hilfe von Schiebereglern festlegen.
@raphael811 es geht hier um abgerundete Ecken nicht um einen Schatteneffekt.
mfg Stephan
Sorry, falschen Link, meinte http://www.webmaster-elite.de/online-tools/border-radius-generator.html -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
