web-dev-qa-db-fra.com

CSS coins arrondis dans IE8

J'ai des problèmes avec les coins arrondis dans IE8. J'ai essayé quelques méthodes sans succès.

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

Qui produit ceci dans Firefox:

firefox example

Mais ceci dans IE8:

IE8 makes me sad

Si quelqu'un a des conseils, je serais très reconnaissant!

edit: Joseph a aidé en suggérant d'utiliser pie.htc, mais je continue à avoir du mal avec cet élément qui ne fonctionne pas:

.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 (sous la version 9) ne prend pas nativement en charge les coins arrondis.

Il y a un script incroyable qui l'ajoutera comme par magie pour vous: CSS3 PIE .

Je l'ai utilisé souvent, avec des résultats étonnants.

69
Joseph Silber

Coins arrondis dans IE8

Internet Explorer 8 (et les versions antérieures) ne pas prend en charge les angles arrondis, cependant il y a quelques autres solutions que vous pouvez envisager:

  • Utilisez des coins arrondis Images à la place ( this le générateur est une bonne ressource)

  • Utiliser un jQuery Corner plugin de ici

  • Utilisez un très bon script appelé CSS3 PIE de ici (avantages et inconvénients ici )

  • Check-out CSS Juice de ici

  • Un autre bon script est IE-CSS3 de ici

Bien que CSS PIE soit la solution la plus populaire, je vous suggère d’examiner toutes les autres solutions et de choisir celle qui vous convient le mieux.

J'espère que c'était utile. Bonne chance!

33
Lior Elrom

Je ne connaissais pas css3pie.com, un site très utile après avoir lu ce post:

Mais après l’avoir testé, cela n’a pas fonctionné pour moi non plus. Cependant, j’ai trouvé que l’envelopper dans le fichier .PHP fonctionnait bien. Donc au lieu de:

behavior: url(PIE.htc);

utilisez ceci:

behavior: url(PIE.php);

J'ai mis le mien dans un dossier appelé jquery, alors le mien était:

 behavior: url(jquery/PIE.php);

Alors, allez voir leurs téléchargements ou téléchargez-les ici:

http://css3pie.com/download-latest

Et utilisez leur fichier PHP. À l'intérieur du fichier PHP, il explique que certains serveurs ne sont pas configurés pour une utilisation .HTC appropriée. Et c'est là le problème que j'ai eu.

Essayez le! Je l'ai fait, ça marche. J'espère que cela aide les autres aussi.

4
Chud37

http://fetchak.com/ie-css3/ fonctionne pour IE 6+. Utilisez ceci si css3pie ne fonctionne pas pour vous.

2
Gautham

PIE.htc a très bien fonctionné pour moi ( http://css3pie.com/ ), mais avec un problème:

Vous devriez écrire le chemin absolu vers PIE.htc. Cela n'a pas fonctionné pour moi lorsque j'ai utilisé le chemin relatif.

2
Zhenya

Comme Internet Explorer ne supporte pas nativement les coins arrondis. Ainsi, une meilleure façon de gérer ce problème sur tous les navigateurs serait d’utiliser des images aux angles arrondis. De nombreux sites Web célèbres utilisent cette approche.

Vous pouvez également trouver des générateurs d’images arrondis sur le Web. Un de ces liens est http://www.generateit.net/rounded-corner/

0
zixtor