html - para - internet explorer no respeta css

Problemas de estilo CSS en entrada en IE8

Question

Tengo un problema para obtener el texto en una entrada que se muestre correctamente en Internet Explorer 8. Firefox, Safari y Chrome muestran lo mismo.

Firefox, Safari y Chrome

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;
}

Answer 1

Establecer una propiedad de altura de línea para el campo de entrada de búsqueda #q?

Answer 2

Hay una regla de CSS3 : el box-sizing la box-sizing . Esta regla es compatible con IE8.

Los IE (incluido IE8) tienen un modelo de caja no estándar, donde el padding y el border se incluyen en el width y en la height mientras que otros navegadores son estándar y no incluyen el relleno y el borde en el ancho. Se describe en detalle here .
Al establecer el box-sizing la box-sizing content-box le dice a los navegadores que no incluyan el borde y el relleno en el ancho, y si configura box-sizing: border-box , todos los navegadores incluirán el borde y el relleno en la anchura. Esto o esto, la pantalla será coherente en todos los navegadores modernos (no es que IE8 sea tan moderno, pero es compatible con esta regla también :).

Answer 3

Intente especificar una line-height: 34px o aproximadamente.

Answer 4

Intente establecer una orientación de altura de línea para IE8 e inferior, como esto:

line-height: 32px/9;

line-height valor de line-height debe ser igual a la altura de la entrada y /9 apuntará a IE8 e inferior.

Answer 5

La posición de entrada debe ser position:absolute; en orden para line-height:37px; de la line-height:37px; y display:inline; trabajar.

Answer 6

No puedo comentar aún, la respuesta de Matthew funcionó para mí, pero en caso de que la gente quisiera un envoltorio solo para IE sin buscar en ningún otro lugar:

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

Answer 7

Solo usa

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

Answer 8

Tuve muchos problemas con eso, y finalmente lo resolví:

por ej. configura

  INPUT {
   line-height: 44px
}

y...

  INPUT:focus {
    line-height: 45px
 }

este ... f ... el píxel marca la diferencia (el foco debe tener + 1px más de lo normal) y ahora tiene el cursor en una buena posición en IE8.

Answer 9

Tuve que establecer la altura de la línea y display: inline . No tengo idea de por qué, pero funcionó para mí.