CSS zaokrąglone rogi w IE8

Mam problemy z zaokrąglonymi rogami w IE8. Wypróbowałem kilka metod bez powodzenia.

Oto Mój kod: 

<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>

Który produkuje to w Firefoksie:

przykład Firefoksa

Ale to w IE8:

IE8 mnie smuci

Jeśli ktoś ma jakieś wskazówki będę bardzo wdzięczny!

Edit: Joseph pomógł sugerując użycie ciasta.htc, jednak nadal walczę z tym elementem nie działa: 

.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;
}
Author: Ryan Wheale, 2011-08-16
Source

6 answers

Internet Explorer (w wersji 9) nie obsługuje natywnie zaokrąglonych rogów.

Jest niesamowity skrypt, który magicznie doda go za Ciebie: CSS3 PIE .

Używałem go wiele razy, z niesamowitymi efektami.

 69
Author: Joseph Silber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-16 11:21:49

Zaokrąglone rogi w IE8

Internet Explorer 8 (i wcześniejsze wersje) nie obsługuje zaokrąglonych rogów, jednak istnieje kilka innych rozwiązań, które możesz rozważyć:

  • Zamiast tego użyj zaokrąglonych rogów Images( to generator jest dobrym zasobem)

  • Użyj jQuery Corner plugin z proszę.

  • Użyj bardzo dobrego skryptu o nazwie CSS3 PIE z tutaj (Pro & Con tutaj)

  • Checkout CSS Juice from proszę.

  • Kolejny dobry skrypt to IE-CSS3 z proszę.

Mimo że CSS PIE jest najpopularniejszym rozwiązaniem, sugeruję, abyś przejrzał wszystkie inne rozwiązania i wybrał to, co najlepiej pasuje do Twoich potrzeb.

Mam nadzieję, że się przyda. Powodzenia!
 33
Author: Lior Elrom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-05 03:24:13

Nie wiedziałem o css3pie.com, bardzo przydatna strona po obejrzeniu tego posta:

Ale to, co po przetestowaniu, nie zadziałało również dla mnie. Jednak znalazłem, że owijanie go w .Plik PHP działał dobrze. Więc zamiast: 

behavior: url(PIE.htc);

Użyj tego: 

behavior: url(PIE.php);

Umieściłem mój w folderze o nazwie jquery, więc mój był: 

 behavior: url(jquery/PIE.php);

Więc goto ich pobrań lub dostać go tutaj:

Http://css3pie.com/download-latest

I użyć ich pliku PHP. Wewnątrz PHP plik wyjaśnia, że niektóre serwery nie są skonfigurowane do prawidłowego .Korzystanie z HTC. I to był mój problem.

Spróbuj! Tak, to działa. Mam nadzieję, że to pomoże innym też.
 4
Author: Chud37,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-27 18:23:46

Http://fetchak.com/ie-css3 / działa dla IE 6+. Użyj tego, jeśli css3pie nie działa dla Ciebie.

 2
Author: Gautham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-05 13:10:42

Ciasto.htc zadziałało dla mnie świetnie ( http://css3pie.com/), ale z jednym zagadnieniem:

Powinieneś napisać absolutną ścieżkę do PIE.htc. Nie zadziałało, gdy użyłem ścieżki względnej.

 2
Author: Ievgen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-15 09:07:59

Ponieważ Internet Explorer nie obsługuje natywnie zaokrąglonych rogów. Tak więc lepszym sposobem obsługi między przeglądarkami byłoby użycie obrazów z zaokrąglonymi narożnikami w rogach. Wiele znanych stron internetowych korzysta z tego podejścia.

Można również znaleźć zaokrąglone Generatory obrazów w Internecie. Jednym z takich linków jest http://www.generateit.net/rounded-corner/

 0
Author: zixtor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-18 10:27:05