html - texto - sangria francesa

La sangría de texto no está funcionando 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 siguiente CSS en el botón de búsqueda de envío

#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 IE7, la sangría de texto no funciona, por favor, ayúdenme si quiere ver la demostración, puede verla haciendo clic aquí . Haga clic aquí . Por favor, ayúdame.

Answer 1

Agregue este CSS para hacer que IE7 se comporte:

text-transform: capitalize;

Loco pero cierto

Answer 2

Aquí hay un 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 3

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

Answer 4

La solución que encontré para mis problemas de texto-guión en IE7, y algo que creo que debería agregarse a este hilo es la siguiente:

No funciona:

text-indent: -900009px;

Funciona:

text-indent: -9999px;

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

Answer 5

Lo siento un poco tarde para la publicación, pero estaba buscando una solución para el 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 solo para IE7

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

Answer 6

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

Answer 7

No use text-indent . Prueba 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 8

Si nada funciona exactamente bien, esto hace:

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

Por lo tanto, los navegadores normales utilizan el texto de sangría negativo, es decir, 7 obtiene un tratamiento especial con comentarios condicionales

Answer 9

Solo el seguimiento hará el trabajo por ti :)

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

Answer 10

Solo quería agregar para "otros" (aunque no esté estrictamente relacionado con el tema y no con el problema de las operaciones).

Por favor, asegúrese de usar un "px" para su valor. ie -9999px no -9999.

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

Últimamente estuve haciendo mucho de Silverlight, así que mi mente no se pasó rápidamente a los requisitos de marcado de CSS. Grrr.

Debe incluir una unidad de medida ... o de lo contrario solo fallará en silencio.

Answer 11

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 la altura de línea explícitamente en 0.

Answer 12

al implementar la técnica de reemplazo de imágenes como se indica arriba, hay 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 usa 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.

display: block El texto-sangría negativo funciona en IE solo si se agrega.

line-height: 0 Otra solución para IE6.

text-transform: capitalize No sé la razón exacta de incluir la propiedad, de alguna manera soluciona el problema.

Espero que esto ayude.

Answer 13

texto-transformar: 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

Answer 14

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

este é um exe simse