CSS3 PIE - Donnant IE border-radius soutien ne fonctionne pas?
Je suis en train de faire des coins arrondis dans IE avec le TARTE CSS3 comportement attaché.
Voici mon CSS:
.fieldRow {
clear:both;
padding: 0;
margin: 0;
overflow: hidden;
line-height:17px;
}
.alternate, .rowMousedOver {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.php);
position: relative;
}
.rowMousedOver{
background-color: #E2E66D !important;
}
.alternate {
background-color: #FCFEE8;
}et voici quelques exemple de code HTML:
<div class="fieldRow alternate">
<div class="label"><label id="title_label" for="title"> Title: </label></div>
<div class="fieldWrapper required text">
<div class="cellValue"><input type="text" onchange="validateField(this)" name="title" id="title" value="Tax Free Savings Accounts" disabled=""></div>
</div>
</div>et via javascript-je ajouter rowMousedOver à la fieldRow quand il est a plané.
Aucune idée du pourquoi cela ne fonctionne pas? J'ai aussi essayé d'utiliser behavior: url(PIE.htc), mais pas eu de chance avec l'un ou l'autre.
Merci!
- Ça fonctionne sur Firefox et google chrome?
- C'est peut-être un problème avec le chemin d'accès. Parce que htc est un MS standard, le chemin de l'url est relative au document plutôt que de la feuille de style. Vous pouvez toujours essayer d'utiliser une URL absolue de la première.
- C'est ce que cordesmj également suggéré, mais je l'ai mis au bon endroit et il n'est pas encore arrondi.
- z-index ne fonctionne pas sur la position relative... uniquement sur absolute 😉
Vous devez vous connecter pour publier un commentaire.
La TARTE.htc demandes doivent répondre avec le type mime "text/x-component" - ou IE ne touche pas le comportement. L'PIE.php vous devez résoudre ce problème. Si vous n'êtes pas sûr si c'est le cas, l'utilisation de FireBug Net fonctionnalité pour vérifier une demande directe pour le fichier.
Également noter que le chemin d'accès à TARTE.htc est par rapport À LA PAGE HTML - pas par rapport au fichier css qui vous attendent. Envisagez donc de faire le chemin à l' .htc absolue. Ici FireBug peut vous aider à nouveau pour détecter si vous avez une erreur 404 question.
Plus d'info à http://css3pie.com/documentation/known-issues/
Essayez d'ajouter un
position: relativedans votre déclaration css. J'ai eu ce problème une couple de fois et il est normalement résolu en faisant cela. Plus d'informations peuvent être trouvées à: http://css3pie.com/documentation/known-issues/Essayez d'ajouter
comme suggéré ici http://css3pie.com/forum/viewtopic.php?f=3&t=10
Le problème peut être dans votre chemin d'accès, selon l'endroit où vous mettez la TARTE.htc fichier. Notez que la Tarte du "guide de démarrage" de la documentation (ici) mentionne les suivantes:
Donc
behavior: url(PIE.htc);devrait fonctionner si la TARTE.htc fichier est dans le même dossier que votre fichier html (au moins, il a travaillé pour moi 🙂 ).Cependant, vous ne savez pas ce que vous voulez voir arrondi... la div qui seraient touchés ne semble pas avoir toutes les caractéristiques visibles. Si vous voulez voir la div avec des coins arrondis, vous pouvez faire de la frontière ou d'arrière-plan visible, comme l'ajout de
border: 1px solid black;oubackground-color: someColor;à la fieldrow classe.Si vous voulez voir le champ de saisie arrondis, vous pouvez déclarer la classe comme
.fieldRow input {...}Néophyte de réponse ici (utiliser un commentaire conditionnel dans la section d'en-tête) m'a aidé quand tout le reste semble très bien /ne pas faire une différence (sur le plus simple des pages de test, à partir de IIS 7 avec IE8)
http://www.webmasterworld.com/forum83/9144.htm
Espère que ça aide quelqu'un
Également intéressant de noter - j'ai eu un problème où les coins arrondis ne travaillaient pas dans lte IE8 quand je l'avais définir une couleur d'arrière-plan avec un
!importantrègle d'après elle. Une autre raison de ne pas l'utiliser !important!Une solution qui fonctionne pour moi est comme suit:
Dan