guión de texto no funciona en IE7

Question

estoy trabajando en un sitio web y en la barra de navegación superior hay un cuadro de búsqueda, apliqué el botón siguiente CSS en la búsqueda enviar

#submit { 
    background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF; 
    border:0 none; 
    cursor:pointer; 
    display:block; 
    height:21px; 
    padding:0; 
    position:absolute; 
    right:0; 
    text-indent:-9999px; 
    top:0; 
    width:20px; 
    z-index:2; 
} 

Mi problema es que en IE7 la sangría de texto no funciona, por favor ayudame si quieres ver la demostración, puedes verla haciendo clic aquí Click here. Por favor, ayúdame.

Answer 1

No sé si es la causa de su problema, pero creo que su notación abreviada background es incorrecta; el código de color debe estar al principio, no al final.

Answer 2

.submit { 
    line-height: 0px; font-size: 0px; 
    /* restante do teu código */ 
    } 

Este é um exemplo simse

Answer 3

Añadir este CSS para hacer IE7 comportan:

text-transform: capitalize; 

loco pero cierto.

Answer 4

al implementar la técnica de sustitución de imágenes como se indica anteriormente, existen algunas reglas para ir con CSS para que funcione en los navegadores IE.

declaración CSS:

text-indent:-9999px; 
text-transform:capitalize; 


font-size:0; 
display:block; 
line-height:0; 

font-size: 0 se utiliza para reducir el tamaño de fuente y funciona bien en IE7. Pero incluso después de agregar esta línea, notaría una línea negra (que es básicamente el texto) en el centro del botón en IE6.

pantalla: bloque texto-guion negativo funciona en IE solo si se agrega.

altura de línea: 0 Otra solución para IE6.

text-transform: capitalize No sé el motivo exacto de la inclusión de la propiedad, de alguna manera se soluciona el problema.

Espero que esto ayude.

Answer 5

Disculpamos un poco la publicación, pero estábamos buscando una solución al problema de IE7 con sangría de texto negativa. Empecé a probar mis propios caminos al azar y tropecé con esto. Has querido publicarlo en Stack en caso de que pueda ayudar a otros.

Intentando agregar un icono a un enlace y no mostrar el texto.

Mi CSS para todos los navegadores

a.lnk_locked , a.lnk_notchecked, a.lnk_checked 
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0; width:18px; height:18px; 
     vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;} 
    a.lnk_locked { background-position: -1px -217px; } 

Mi CSS sólo para Internet Explorer 7

a.lnk_locked , a.lnk_notchecked, a.lnk_checked 
{ text-indent:20px; padding-left:-20px; width:18px;} 

Answer 6

sólo quería añadir a "otros" (aunque no estrictamente relacionada con el tema y no el problema de operaciones).

Por favor, asegúrese de utilizar un "px" para su valor. es decir, -9999px no -9999.

Acabo de pasar 10 minutos intentando depurar por qué esto no funcionó. Mirando el valor justo en frente de mí.

He estado haciendo mucho de Silverlight últimamente, por lo que mi mente no pasó rápidamente a los requisitos de marcado de CSS. Grrr.

Debe incluir una unidad de medida .... de lo contrario, simplemente fallará en silencio.

Answer 7

La solución que he encontrado a mis aflicciones de texto guión en IE7, y algo que creo que debería ser añadido a este tema es la siguiente:

no funciona:

text-indent: -900009px; 

¿El trabajo:

text-indent: -9999px; 

¿No sabía que había un límite? Supongo que hay

Answer 8

Si nada de esto funciona exactamente a la derecha, esto hace:

color: transparent; 
text-indent: 0 !important; /* reset the old negative value */ 

navegadores Así normales utilizar el texto-guión negativo, IE7 recibe un tratamiento especial usando conditional comments

Answer 9

Sólo después de hacer el trabajo para usted:)

text-indent:-9999px !important; 
    line-height:0; 

Answer 10

Tiene un problema similar en IE8. Después de eliminar todas las otras posibilidades, una declaración de altura de línea en otro lugar del CSS estaba rompiendo el texto-sangría. solución: establezca explícitamente la altura de línea en 0.

Answer 11

No utilice text-indent. Pruebe este en su lugar:

display: block; 
height: 0; 
padding-top: 20px; //The height of your button 
overflow: hidden; 
background: url(image.png) no-repeat; // Image replacement 

Funciona en todos los navegadores, incluido IE6.

Answer 12

Intenté todo lo anterior sin éxito. Tuve que agregar un float:left antes de que recogiera la sangría del texto. IE7 está loco, y por loco quiero decir horrible.

Answer 13

Aquí es un poco de CSS que estoy usando que funciona para mí en IE y no se basa en text-indent

.sprite { 
    width:100%; 
    height:0px; 
    padding-top:38px; 
    overflow:hidden; 
    background-repeat:no-repeat; 
    position:relative; 
    float:left; 
    display:block; 
    font-size:0px; 
    line-height:0px; 
} 
.sprite.twitter { 
    background-image:url(/images/social/twitter-sprite.png); 
    margin-top:8px; 
    background-position: 4px 0px; 
} 
#social-links a:hover .sprite.twitter { 
    background-position: 4px -38px; 
} 

Answer 14

text-transform: capitalizar; en realidad no tuvo ningún efecto para mí (estaba sucediendo en las etiquetas), pero esto funcionó

text-indent: -9999px 
float: left 
display: block 
font-size: 0 
line-height: 0 
overflow: hidden