CSS закругленные углы в IE8 - PullRequest
Новая
       29

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

58 голосов
/ 16 августа 2011

У меня проблемы с закругленными углами в 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:

firefox example

Но это в IE8:

IE8 makes me sad

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

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

Ответы [ 6 ]

69 голосов
/ 16 августа 2011

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

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

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

33 голосов
/ 07 мая 2013

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

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

  • Вместо этого используйте закругленные углы Images ( этот генератор является хорошим ресурсом)

  • Используйте jQuery Corner plugin от здесь

  • Используйте очень хороший скрипт, который называется CSS3 PIE из здесь (Pro & Con's здесь )

  • Оформить заказ CSS Juice из здесь

  • Еще один хороший скрипт - IE-CSS3 из здесь

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

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

4 голосов
/ 27 июня 2012

Я не знал о 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. И это была моя проблема.

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

2 голосов
/ 15 февраля 2013

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

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

2 голосов
/ 05 октября 2012

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

0 голосов
/ 16 августа 2011

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

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

...