web-dev-qa-db-fra.com

Problèmes de style CSS lors de la saisie dans IE8

Je ne parviens pas à afficher correctement le texte d'une entrée dans Internet Explorer 8. Firefox, Safari et Chrome affichent tous la même chose.

Firefox, Safari et Chrome

Firefox, Safari and Chrome

Internet Explorer 8

Internet Explorer 8

    <form action="" method="get">
       <input id="q" name="q" type="text">
       <input id="s" name="s" type="submit" value="Sök">
    </form>

#q {
    background:url(../../image_layout/search_field.png) no-repeat;
    width:209px;
    height:32px;
    padding:0 5px 0 5px;
    text-align:left;
    margin:0;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#09305b;
    font-weight:bold;
    position:absolute;
    left: 0px;
    top: 19px;
}
#s {
    background:url(../../image_layout/serach_buttom.png) no-repeat;
    width:56px;
    height:34px;
    padding:0;
    margin:0;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    border:0;
    position:absolute;
    left: 225px;
    top: 17px;
}
htmlcssinputtextinput
19
jamietelin

Essayez de spécifier un line-height: 34px ou à peu près.

23
Matthew Abbott

Il existe une CSS3 règle: le box-sizing . Cette règle est prise en charge par IE8.

Les IE (y compris IE8) ont un modèle de boîte non standard dans lequel padding et border sont inclus dans width et height alors que les autres navigateurs utilisent la norme et n'incluent pas de remplissage ni de bordure dans la largeur. Il est décrit en détail ici .
En définissant box-sizing sur content-box, vous indiquez aux navigateurs de ne pas inclure de bordure et de remplissage dans la largeur. Si vous définissez box-sizing: border-box, tous les navigateurs incluront une bordure et un remplissage en largeur. Ceci ou cela, l'affichage sera cohérent sur tous les navigateurs modernes (non pas que IE8 soit si moderne, mais il supporte aussi cette règle :).

11
Shimon Rachlenko

Je devais définir la hauteur de ligne et display: inline. Je ne sais pas pourquoi, mais ça a fonctionné pour moi.

5
bergie3000

Définir une propriété line-height pour le champ de saisie de recherche #q?

2
Munim

Essayez de définir une taille de ligne ciblant IE8 et les versions antérieures, comme ceci:

line-height: 32px\9;

La valeur line-height devrait être égale à la hauteur de l'entrée et \9 ciblera IE8 et les versions antérieures.

2
Paul Eduard Stanciu

La position de saisie doit être position:absolute; pour que line-height:37px; et display:inline; fonctionnent.

1
keen

Juste utiliser

line-height: 34px!important;
height: 34px;
0
arkasha69

J'ai eu beaucoup de problèmes avec ça, et finalement je l'ai résolu:

par ex. vous avez mis

  INPUT {
   line-height: 44px
}

et...

  INPUT:focus {
    line-height: 45px
 }

celui-ci ... f ... pixel fait la différence (la mise au point doit avoir + 1 pixels de plus que la normale) et vous avez maintenant votre curseur en bonne position sur IE8.

0
sinner

Je ne peux pas encore commenter, la réponse de Matthew a fonctionné pour moi, mais au cas où les gens voulaient un wrapper uniquement pour IE, sans chercher ailleurs:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    line-height: 20px;
}
0
suzumakes