Ok c'est apparemment impossible à obtenir le droit. J'ai une zone de texte et une boîte de sélection. Je veux qu'ils soient de la même largeur à l'identique afin qu'ils s'alignent sur la marge gauche et la marge de droite.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
Que feriez-vous que, droite? Nope. La boîte de sélection est 6px plus courte dans Firefox. Voir la capture d'écran.
Ok donc permet de modifier le code et de faire deux styles.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Ok qui fonctionne!
Oh, attendez, le meilleur test en Chrome...
Quelqu'un peut-il me dire comment ligne dans tous les navigateurs? Pourquoi je ne peux pas juste faire width: 200px sur tout, pourquoi tous les navigateurs affichent différemment? Aussi pendant que nous y sommes pourquoi la zone de texte et sélectionnez la boîte de hauteurs différentes? Comment pouvons-nous les obtenir à la même hauteur? Ont essayé de hauteur et la hauteur de la ligne n en vain.
Solution:
Ok j'ai trouvé la solution avec l'aide de quelques réponses ci-dessous. La clé est d'utiliser la box-sizing: border-box de la propriété, de sorte lorsque vous spécifiez la largeur qui inclut la frontière et le rembourrage. Voir l'excellente explication ici. Ensuite, le navigateur ne peut pas tout.
Le Code est ci-dessous, ont également régler la hauteur de la boîte pour la même taille et de la mise en retrait du texte à l'intérieur de la boîte de sorte qu'il s'aligne. Vous devez également définir la frontière Chrome a vraiment une drôle à la recherche de la frontière qu'il utilise pour sélectionner les cases qui vont se jeter hors de l'alignement. Ce sera le travail pour le HTML5 (par exemple sites de soutien IE9, Firefox, Chrome, Safari, Opera, etc).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Juste un avertissement final, vous ne voulez pas d'entrée de boutons, cases à cocher, etc pour être inclus dans ce style donc, utiliser l' input:not([type='button'])
ne s'applique pas à certains types ou utiliser input[type='text'], input[type='password']
de spécifier ceux que vous souhaitez appliquer.