css text-indent sur l'entrée de texte ne fonctionne pas dans internet explorer 10

je suis en train de personnaliser une saisie de texte avec le css, je veux que le texte à l'intérieur d'une marge de 10px à gauche donc j'utilise:

#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}

Il fonctionne dans tous les navigateurs, sauf pour IE10 qui semble ignorer la text-indent bien, comment puis-je résoudre ce problème?

<input type="text" id="text" />
Voir aussi question suivante pour une solution: stackoverflow.com/questions/7797103/...

OriginalL'auteur | 2013-03-27

  1. 8

    vous pouvez utiliser padding-left, il fonctionne sur tous les navigateurs:

    #text {
    padding: 0 0 0 10px;
    border: 1px solid #333;
    outline: none;
    margin: 0;
    width: 158px; //decrease width with the same padding vale so that the width would stay the same
    height: 20px;
    border-radius: 4px;
}
    merci beaucoup, ça a marché 🙂

    OriginalL'auteur razzak

  2. 8

    Si vous souhaitez utiliser une règle spéciale pour IE, en ajoutant display: inline-block et un line-height, avec la text-indent règle, va corriger cela. C'est un vieux truc pour les deux IE7-9. 

    input.special {
    text-indent: 150px;
    display:inline-block;
    line-height: 18px;
}

    Fait le tour.

    C'est bien si vous êtes en utilisant un liquide ou réactive largeurs et vous ne voulez pas avoir à ajuster votre entrée de largeur sur le compte de la marge.

    Tout cela permettra de résoudre le problème, il ne permet pas d'isoler (et s'appliquent uniquement à Internet Explorer - les styles s'appliquent également à d'autres navigateurs et il provoque une hauteur totale de curseur, qui est généralement laid.
    Fonctionne également avec display:block.

    OriginalL'auteur Yeoj Onacsot