wake-up-neo.com

CSS abgerundete Ecken in IE8

Ich habe Probleme mit abgerundeten Ecken in IE8. Ich habe ein paar Methoden ohne Erfolg ausprobiert.

Hier ist mein Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  padding: 2px;
  margin: 2px;
  color: #505050;
  line-height: normal;
}
p {
  margin: 4px;
}
.categoryheading3 {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}
.leftcolumn {
  width: 174px;
  padding: 8px;
  float: left;
  display: inline-block;
  background-color: transparent;
  /*--min-height: 500px*/
  overflow: hidden;
}
.lefttop {
  display: inline-block;
  width: inherit;
  margin: 0 5px 2em 0;
  float: left;
  width: 160px;
  background-color: #FFFFFF;
  border: 2px solid #297BB6;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
</style>


</head>
<body>

<div class="leftcolumn">
  <div class="lefttop">
    <H4 class="categoryheading3">Heading</H4>
    <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
  </div>
</div>
</body>
</html>

Was erzeugt dies in Firefox:

firefox example

Aber das in IE8:

IE8 makes me sad

Wenn jemand irgendwelche Tipps hat, wäre ich sehr dankbar!

edit: Joseph hat geholfen, indem er vorgeschlagen hat, pie.htc zu verwenden, aber ich habe immer noch Probleme mit diesem Element, das nicht funktioniert:

.categoryheading3 {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  behavior: url(PIE.htc);
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}
cssinternet-explorerinternet-explorer-8rounded-corners
58
falter

Internet Explorer (unter Version 9) unterstützt abgerundete Ecken von Haus aus nicht.

Es gibt ein erstaunliches Skript, das es auf magische Weise für Sie hinzufügt: CSS3 PIE .

Ich habe es oft benutzt, mit erstaunlichen Ergebnissen.

69
Joseph Silber

Abgerundete Ecken in IE8

Internet Explorer 8 (und frühere Versionen) unterstützt keine abgerundeten Ecken, jedoch Es gibt einige andere Lösungen, die Sie in Betracht ziehen könnten:

  • Verwenden Sie stattdessen Abgerundete Ecken Images ( dieser Generator ist eine gute Ressource)

  • Benutze einen jQuery Corner plugin von hier

  • Verwenden Sie ein sehr gutes Skript namens CSS3 PIE von hier (Pro's & Con's hier )

  • Auschecken CSS Juice von hier

  • Ein weiteres gutes Skript ist IE-CSS3 von hier

Obwohl CSS PIE die beliebteste Lösung ist, empfehle ich Ihnen, alle anderen Lösungen zu überprüfen und die für Ihre Anforderungen am besten geeignete auszuwählen.

Hoffe es war nützlich. Viel Glück!

33
Lior Elrom

Ich wusste nichts über css3pie.com, eine sehr nützliche Seite, nachdem ich diesen Beitrag gelesen hatte:

Aber nachdem ich es ausprobiert hatte, funktionierte es auch nicht für mich. Allerdings fand ich, dass es gut funktioniert, es in die .PHP-Datei zu packen. Also statt:

behavior: url(PIE.htc);

benutze das:

behavior: url(PIE.php);

Ich habe meine in einem Ordner namens jquery abgelegt, also war meine:

 behavior: url(jquery/PIE.php);

Also gehe zu den Downloads oder hol sie dir hier:

http://css3pie.com/download-latest

Und verwenden Sie ihre PHP Datei. In der PHP Datei wird erklärt, dass einige Server nicht für die ordnungsgemäße Verwendung von .HTC konfiguriert sind. Und das war das Problem, das ich hatte.

Versuch es! Ich habe es getan, es funktioniert. Hoffe, das hilft auch anderen.

4
Chud37

http://fetchak.com/ie-css3/ funktioniert für IE 6+. Verwenden Sie dies, wenn css3pie für Sie nicht funktioniert.

2
Gautham

PIE.htc hat für mich großartig funktioniert ( http://css3pie.com/ ), aber mit einem Problem:

Sie sollten absoluten Pfad zu PIE.htc schreiben. Es hat bei mir nicht funktioniert, als ich den relativen Pfad verwendet habe.

2
Zhenya

Da Internet Explorer abgerundete Ecken von Haus aus nicht unterstützt. Eine bessere browserübergreifende Möglichkeit wäre die Verwendung von Bildern mit abgerundeten Ecken an den Ecken. Viele berühmte Websites verwenden diesen Ansatz.

Sie können auch gerundete Bildgeneratoren im Web finden. Ein solcher Link ist http://www.generateit.net/rounded-corner/

0
zixtor