border-radius ne fonctionne pas sur IE10

J'ai besoin d'avoir un récipient "DIV" avec des coins arrondis. Le code suivant fonctionne parfaitement sur tous les navigateurs, sauf mon IE10. Je n'ai aucune idée de comment faire pour le faire fonctionner.

#about-kader {
    width: 200px;
    height: 180px; 
    float: left;
    margin: 0px auto;
    background-color: #9bafc4;
    padding: 3px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px;
    -ms-border-radius: 5px;
    behavior: url(border-radius.htc);
}

Et voici la partie HTML, s'il vous plaît:

<div id="about-kader">
...
...
...
</div>

Il n'y a aucun moyen de faire un tour d'angle visible sur IE10. La version que j'ai est: 10.0.9200.16576, mettre à Jour les versions: 10.0.5 (KB289530).

  • Si votre solution, en effet, que le travail, s'il vous plaît poster une réponse et de l'accepter comme réponse.
InformationsquelleAutor Tiz | 2013-05-18
  1. 1

    Le comportement de la frontière rayon est affectée par le mode de compatibilité dans IE10.

    Si vous appuyez sur la touche F12, vous pouvez afficher le développeur de la console et de modifier les paramètres de compatibilité.

    Si le Document en mode IE7 ou IE8 Normes puis le border-radius 5px ne fonctionne pas, toutefois, si les normes de la mode est réglé sur IE9 Normes ou de Normes, alors il se comporte comme prévu.

    J'ai fini par désactiver le mode de compatibilité qu'il rompt également le comportement des autres sites que j'utilise.

    Ravenstar68

    InformationsquelleAutor user2718649
  2. 1

    Grâce à Flipbed réponse j'ai trouvé la réponse. Sur IE10, le "border-radius" pour moi ne fonctionne pas. Afin d'obtenir ce travail, il est nécessaire de spécifier à chaque coin de rue:

    border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;

    En effet, le site que vous avez envoyé est exactement ce que fait (regarde le code source de la page). Il donne en sortie l'instruction:

    border-radius: 5px;

    mais en interne, il déclare les 4 coins séparément comme ci-dessus.

    c'est Ce qui a été extrait à partir de la question et affiché sur l'OP du nom.

    InformationsquelleAutor
  3. 0

    Essayez seulement avec border-radius: 5px, ça marche alors? Si c'est le cas, ajouter un petit border-radius propriétés, un par un, jusqu'à ce que vous trouver l'endroit où le problème se pose. Je soupçonne que c'est l'un de la plus-border-radius propriétés qui est à l'origine du problème. Je soupçonne que le problème pourrait être la source du problème.

    • Malheureusement, avec seulement "border-radius:5px;" ça ne fonctionne pas
    • Essayez de produire du rayon avec cette page et voir si cela fonctionne. border-radius.com
    • Oui avec celui-ci, il fonctionne. Il augmente ma préoccupation, parce que pour ce que je vois, l'instruction est juste border-radius: 5px; j'ai essayé aussi de la largeur de 30px sur la page liée, et il fonctionne. Je ne sais pas où j'ai mal.
    InformationsquelleAutor Flipbed