CSS закругленные углы в IE8

У меня проблемы с закругленными углами в IE8. Я пробовал несколько методов без успеха.

Вот мой код:

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

Что производит это в Firefox:

Но это в IE8:

Если у кого есть какие-то советы, я буду очень благодарен!

edit: Джозеф помог, предложив использовать pie.htc, однако я все еще боюсь, что этот элемент не работает:

.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;
}

Ответ 1

Internet Explorer (по версии 9) не поддерживает округленные углы.

Там удивительный script, который волшебным образом добавит его для вас: CSS3 PIE.

Я использовал его много раз, с потрясающими результатами.

Ответ 2

Закругленные углы в IE8

Internet Explorer 8 (и более ранние версии) не поддерживает закругленные углы, однако есть несколько других решений, которые вы можете рассмотреть:

Используйте закругленные углы Images вместо этого ( этот генератор - хороший ресурс)
Используйте jQuery Corner plugin из здесь
Используйте очень хороший script, называемый CSS3 PIE, из здесь (Pro и Con здесь)
Оформить заказ CSS Juice из здесь
Другим хорошим script является IE-CSS3 от здесь

Несмотря на то, что CSS PIE является самым популярным решением, я предлагаю вам просмотреть все другие решения и выбрать, что наилучшим образом подходит для ваших нужд.

Надеюсь, это было полезно. Удачи!

Ответ 3

Я не знал о css3pie.com, очень полезном сайте после просмотра этого сообщения:

Но что после тестирования это тоже не работало для меня. Однако я обнаружил, что его упаковка в файле .PHP работала нормально. Поэтому вместо:

behavior: url(PIE.htc);

используйте это:

behavior: url(PIE.php);

Я поместил мой в папку с именем jquery, поэтому мой был:

 behavior: url(jquery/PIE.php);

Итак, переходим к загрузке или получаем его здесь:

http://css3pie.com/download-latest

И используйте их файл PHP. Внутри файла PHP это объясняет, что некоторые серверы не настроены для правильного использования .HTC. И в этом была проблема.

Попробуйте! Я сделал, это работает. Надеюсь, это тоже поможет другим.

Ответ 4

http://fetchak.com/ie-css3/ работает для IE 6+. Используйте это, если css3pie не работает для вас.

Ответ 5

PIE.htc работал у меня отлично (http://css3pie.com/), но с одной проблемой:

Вы должны написать абсолютный путь к PIE.htc. Это не сработало для меня, когда я использовал относительный путь.

Ответ 6

Так как Internet Explorer не поддерживает округленные углы. Таким образом, лучший кросс-браузерный способ справиться с этим будет заключаться в использовании закругленных изображений по углам. Многие известные веб-сайты используют этот подход.

Вы также можете найти генераторы округлых изображений в Интернете. Одна такая ссылка http://www.generateit.net/rounded-corner/