HTML: c'est à dire: remplissage à Droite dans la zone de texte d'entrée

Aller à http://jsfiddle.net/srLQH/ et de remplir la zone de texte d'entrée dans le "Résultat" de la vue.

Si vous faites cela, FF, Chrome et Safari, votre texte va s'arrêter 20px court du côté droit.

Dans IE 7/8, le texte ne s'arrête pas 20px court--il va tout le chemin vers le bord de la zone de saisie.

Quel est le problème avec IE? Comment puis-je obtenir le même rembourrage en effet c'est à dire que tous les autres navigateurs me donner?

InformationsquelleAutor SnickersAreMyFave | 2010-09-22

7

J'ai été à la recherche d'un moyen de résoudre ce problème. Un collègue a trouvé une solution et nous l'avons testé et il fonctionne parfaitement. Le truc c'est de supprimer le padding: right et ajouter un border: 20px solid transparent.
- cela fonctionne assez bien pour ie8. Modernizr ajoute la classe "ie" à l'élément HTML qui le rend facile à séparer ie hacks. Utiliser "box-sizing: border-box;" avec elle.
- Cela fonctionne pour les autres navigateurs populaires aussi bien. Pas besoin de faire une exception pour IE. Par le chemin, à gauche de rembourrage doit également être traitée de cette façon.
- mrust la réponse est la vraie solution
InformationsquelleAutor Monica

J'ai trouvé une façon de le faire, mais ce n'est pas assez.

http://jsfiddle.net/dmitrytorba/dZyzr/162/

<!--[if IE]>
<style type="text/css">
input {
  border: none;
  margin: 5px;
  padding-right: 0px;
}
.wrapper {
    border: 1px #aaa inset;
}
.spacer{
    margin-left: 20px;
}
</style>
<![endif]-->


<span class='wrapper'>
    <input type='text' />
    <span class='spacer'></span>
</span>

De travail, réponse honnête. Merci.
mrust la réponse est la vraie solution

InformationsquelleAutor Dmitry Torba

3

Je sais que cette question est ancienne, mais après beaucoup de recherche, j'ai trouvé une solution qui fonctionne.

Vous pouvez ajouter le "padding" revenir à IE par l'ajout de marges sur la valeur à l'aide de la suite.

d'entrée par défaut rembourrage
```
 
input[type="text"]{ 
padding-left:17px; 
padding-right:17px; 
} 
```
rembourrage pour IE entrées
```
 
input[type="text"]::-ms-valeur { 
margin-left:17px; 
margin-right:17px; 
} 
```
mais alors vous aurez besoin de retirer le rembourrage pour IE 10+ (afin de ne pas utiliser les deux) que vous pouvez faire avec cette requête de média.
```
 
@media screen and (-ms-contraste élevé: active), (-ms-contraste élevé: aucun) { 
input[type="text"] { 
padding-left:0; 
padding-right:0; 
} 
} 
```
- Merde c'est intelligent. Du bon travail.
InformationsquelleAutor ajmccallum
2

Il apparaît que si IE est l'application de la CSS, mais pas jusqu'à la fin de la ligne. Qui est, le rembourrage est influencé par la valeur, plutôt que de la valeur influencé par le rembourrage.

Lors de la définition de la marge de 20px tout autour avec une valeur par défaut de plus que la largeur par défaut, vous pouvez faire défiler jusqu'à la fin et de voir le rembourrage. http://jsfiddle.net/dZyzr/

Vous allez avoir à venir avec une astuce visuelle, ou tout simplement utiliser une autre feuille de style pour IE.
- mrust la réponse est la vraie solution
InformationsquelleAutor Robert
2

Juste chuck dans un autre élément qui va faire rembourrage dans IE, comme un div. Ensuite, vous n'avez pas besoin de vous soucier de laid hacks invalider votre feuille de style css. N'oubliez pas de retirer le rembourrage de l'entrée afin de ne pas gêner les autres navigateurs. C'est aussi la seule façon de donner une zone de texte d'une image de fond qui ne veut pas faire défiler le texte dans IE.
- mrust la réponse est la vraie solution
- Toutes les réponses ont été bien lorsque la question a été posée en 2010, pas besoin de downvote tout le monde.
- stackoverflow.com/help/privileges/vote-down : "Utilisez votre downvotes chaque fois que vous rencontrez ... une réponse qui est clairement ... incorrect". À la lumière de la réponse correcte, tous les autres sont manifestement erronées à mon humble avis. Je comprends que ce n'était pas le cas en 2010, mais je ne vois pas en quoi c'est pertinent aujourd'hui. Rien de personnel 😉
InformationsquelleAutor Randy the Dev
2

C'est une vieille question, mais j'ai corrigé cela dans IE10 en suivant ceci:

Comment résoudre ce problème Pour IE-10 :
```
::-ms-clear {
  display: none;
}
```
Ou pour une entrée spécifique :
```
.anyinput::-ms-clear {
    display: none;
}
```
Voir plus d'informations ici:
http://sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html
- Juste utilisé ce pour un Kendo MaskedTextBox, a parfaitement fonctionné quand aucune des réponses n'a/ont été appropriées. Merci 🙂
- C'était la véritable cause du problème, et la solution. Merci!
InformationsquelleAutor Chewpers
-1

Essayer cette hacks ie
```
input{
 padding-right : 20px /* all browsers, of course */  
 padding-right : 20px; /* IE8 and below */  
 *padding-right : 20px; /* IE7 and below */  
 _padding-right : 20px; /* IE6 */  
}
```
démo

http://jsfiddle.net/srLQH/2/

Conseils

rembourrage ne fonctionnent pas bien avec de l'élément de formulaire html ie input textarea comme ça
essayez de la modifier à marge
```
input{
 margin-right : 20px /* all browsers, of course */  
 margin-right : 20px; /* IE8 and below */  
 *margin-right : 20px; /* IE7 and below */  
 _margin-right : 20px; /* IE6 */  
}
```
depuis dans jsfiddle , vous avez seul de ces éléments, pourquoi ne pas vous essayer

à la marge de gauche, au lieu de margin-right
- Veuillez vérifier votre travail avant de soumettre votre réponse. Je vous remercie.
InformationsquelleAutor Pramendra Gupta
-1

Vous pouvez utiliser la propriété css text-indent pour cet élément:

Pour exemple:
```
<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />
```
- Comment se fait-cela n'a pas eu upvoted?! omg c'Est le site brisé. Je suppose que c'est à cause qu'ils m'ont demandé de padding à gauche mais j'ai trouvé cela utile.:)
- Aurait été agréable de voir une solution plus efficace
InformationsquelleAutor Brotheryura

Vous devez vous connecter pour publier un commentaire.