CSS3 border radius et Internet Explorer 8

Je suis en utilisant CSS3 border-radius styles dans ma page web et je veux qu'il soit de la croix-navigateur compatible sur les principaux navigateurs, y compris IE8.

Donc, je suis en train d'utiliser le border-radius.fichier htc pour atteindre cet objectif. Où que ce soit dans mon css styles les border-radius est utilisé, j'ai codé quelque chose comme:

   -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px; 
    behavior:url(border-radius.htc);

Malheureusement, quand j'ai de vérifier la page web dans IE8, tous les milieux qui ont border-radius comportement finissent pas de montrer à tous.

La page web à http://www.domainandseo.com/portfolio/dominos/index.html

Toutes les suggestions sont grandement appréciés.

InformationsquelleAutor Alex Zahir | 2012-11-08
  1. 2

    Versions d'Internet explorer antérieures à 9 ne prennent pas en charge cette propriété. De vérifier la matrice de compatibilité. Si vous voulez des coins arrondis dans les vieux navigateurs que vous avez à les atteindre par le biais d'un conteneur transportant les bords arrondis de l'image.

    • oui, ils ne sont pas en charge les propriétés CSS3. Mais il y a certains scripts etc que de manipuler plus tôt navigateurs pour atteindre le css3 effets. border-radius.htc est l'un de ces pour le navigateur-rayon de la propriété. Mais pour l'instant, le border-radius.htc ne fonctionne pas correctement pour ma page sur IE8, et au lieu de montrer rayon des frontières pour les décors, il finit par ne pas montrer les origines du tout.
    InformationsquelleAutor Konstantin Dinev
  2. 2

    Je ne sait pas qui "border-radius.htc" le fichier que vous utilisez, mais si vous êtes en utilisant quelque chose comme TARTE CSS3, c'est un problème connu. À partir de leur page:

    Le seul moyen que je connaisse pour contourner ce soit:

    • faire la cible de l'élément en position relative, ou
    • faire l'ancêtre de l'élément en position relative et de lui donner un z-index.

    Ces deux solutions de contournement peut entraîner des effets secondaires indésirables de l'enfant de l'élément de positionnement et de z-index de l'empilement. TARTE pourrait facilement de la force de l'un ou de l'autre lui-même, mais:

    • L'un ou l'autre peut être plus approprié en fonction de la situation particulière, de sorte que le CSS auteur doit être en mesure de contrôler l'on aura choisi.
    • Forcer position:relative à l'extérieur de la CSS mettrait IE hors de synchronisation avec d'autres navigateurs, menant à la confusion des incohérences.
    InformationsquelleAutor MarcoK
  3. 1

    Vous pourriez être mieux d'essayer d'utiliser un JavaScript polyfill plutôt que d'essayer de charger une .htc fichier. Celui qui vient à l'esprit est Mike Alsup Coin du plugin jQuery, trouvé à http://jquery.malsup.com/corner/. Vous pouvez utiliser les commentaires conditionnels pour charger uniquement dans internet explorer 8 ou version antérieure:

    <!--[if lte IE 8]>
<script src="path_to_your_scripts_folder/jquery.corner.js"></script>
<script>
    $(function(){
        $('your_selector_here').corner('corner_radius_in_pixels');
    });
</script>
<![endif]-->
    • Notez que si vous utilisez un autre polyfill pour box-ombre, ils ne se présentent pas très jolie à l'aide de ce.
    InformationsquelleAutor Tieson T.
  4. 0

    CSS3 PIE nécessite le chemin d'accès utilisé pour être par rapport à l'HTML et de ne pas le CSS qui est différent que de dire d'une image ou d' @font-face de la police, vous êtes en train de charger via CSS. Vous pourriez trouver ce qui fonctionne le mieux pour placer l'URL absolue de votre TARTE.htc fichier dans votre CSS.

    InformationsquelleAutor Bill Robbins
  5. -3

    Essayez cela, il va travailler:

    #main{position:relative;}

    la mention de cette id que dans IE feuilles de style.

    InformationsquelleAutor Gopikrishna