css: problème avec la largeur et le rembourrage de l'entrée dans IE

Je vais avoir un problème avec les largeurs sur l'entrée[texte] champs dans IE, toutes les versions.

J'ai un div avec un explicitement définir la largeur de 250px.
Dans cette div, j'ai un champ de saisie de texte avec une largeur de 100%. Cette entrée a également un interne gauche-padding de 10px.

Dans IE, il rend une largeur de 100% + 10px. Je ne peux pas trouver une technique pour contraindre la largeur du conteneur.

Ce problème est apparue initialement dans tous les navigateurs, mais il a été très facile à fixer dans FF, Safari et Chrome en ajoutant max-width:100%. IE6/7 ne prennent pas en charge ce, alors que IE8 ne mais aussi, elle ajoute encore le rembourrage sur la largeur.

Je comprends que IE modèle de boîte comprend des frontières et de la marge dans ses calculs de largeur, donc avec cette donnée, comme l'a compris je ne peut toujours pas trouver un moyen de contourner cela.

Je suis aussi en train d'essayer de trouver une meilleure solution que de simplement la définition de mon entrée largeurs de 240px avec le rembourrage, parce qu'il y a différentes entrées dans ce formulaire qui est des contenants varient en taille et je voudrais trouver une solution universelle.

Voici un code:

<div class="places_edit_left">
    <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="phoneNumber"/>

    <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="address"/>
</div>

CSS

.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}

OriginalL'auteur | 2009-07-23

6

Meilleure solution: Véritable solution
```
.content {
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}
```
Ce l'on va travailler pour IE8+, et bien sûr tous les autres navigateurs modernes

Laid solution, mais travaillent également dans les vieux IE: Ici

OriginalL'auteur elon
2
1. Le mauvais modèle de boîte s'applique à IE en mode quirks. Par conséquent, vous devrez peut-être déclencher le mode strict. Voir, par exemple, http://www.quirksmode.org/css/quirksmode.html
2. Vous voulez faire de l'entrée comme à la largeur du conteneur? Réglez la largeur explicitement (250px - 10px padding - XXpx pour les bordures). Vous voulez l'entrée pour ne pas être plus large que la div? Set de débordement pour les div caché.
Le doctype est correctement réglée pour xhtml transitional. Rapport de la quirksmode page. Je suis penser que, même en mode strict, c'est à dire traite des éléments de formulaire, comme ils sont en mode quirks.

OriginalL'auteur Residuum
0

Sans compter le max-width question, c'est à dire est en train de faire la bonne chose ici. Le modèle de boîte CSS dit qu'un élément de la taille globale est la somme de la largeur et son rembourrage, en PLUS de ses marges.

Le modèle de boîte également dit que, pour tout non-bloc flottant élément de niveau, l'ensemble de la taille de l'élément (tout compris) est toujours de 100% de l'élément conteneur. Vous pouvez l'utiliser à votre avantage par réglage de la largeur de votre boîte d'entrée "auto", puis la configuration de votre rembourrages de la frontière, et les marges de manière explicite.

Voici un petit exemple (je sais que c'est beaucoup de balises, mais c'est un peu overkill pour illustrer ce point),
```
.places_edit_left{ 
  width:250px; 
  overflow:auto;
}

.places_edit_left input {
  padding-right:0px;
  padding-left:10px;  
  margin: 0 0 0 0;
  border:1px solid black;
  width:auto;
  display:block;
  float:none;
}
```
Désolé, mais cela ne fonctionne pas. Même lorsque vous définissez les entrées comme les éléments de niveau bloc, ils ont encore réduire leurs tailles par défaut.
Vous pouvez parfois avoir des problèmes si votre parent DIV flotteurs. Voir mes modifications.
Aussi, essayez de télécharger le IE barre d'outils du Développeur, qui vous permettra d'interroger le document dans internet explorer pour voir ce que les propriétés ne le sont réellement.

OriginalL'auteur Dave Markle
0

Vérifier: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html
J'ai suivi la seconde solution.

Le lien est mort.

OriginalL'auteur Pavlo Neyman

Vous devez vous connecter pour publier un commentaire.