navegadores - scrollbar css firefox



¿Existe alguna solución CSS para el error de Firefox: bloque en línea+primera letra con cambio de tamaño? (3)

Descubrí que el reflujo desencadenante en toda la página (o cualquier bloque con un problema) soluciona el problema, así que encontré una manera de desencadenarlo en cada bloque con una animación CSS única: http://jsfiddle.net/kizu/btdVd/23/

Sin embargo, aunque esta solución no tiene inconvenientes en la representación, tiene otras:

  • funcionaría solo para Fx5 + (que soporta animaciones);
  • aún parpadea el error original durante unos pocos ms, por lo que es quizás un poco intermitente.

Por lo tanto, no es una solución ideal, pero ayudaría un poco cuando Fx4 estuviera desactualizado. Por supuesto, puede desencadenar tal carga al cargar con JS, pero no es tan bueno.

Es mejor ver un error en Firefox: http://jsfiddle.net/kizu/btdVd/

La foto, mostrando el error:

Y el error se llenó en 2007 en bugzilla .

El error aparece cuando se agrega ::first-letter pseudo-elemento de ::first-letter con display: inline-block , y luego cambia el font-size de font-size de esta first-letter .

Más letras en una palabra después de la primera: se agrega más espacio extra (o se resta, si el tamaño de la fuente es menor que el del bloque).

Al agregar float: left a la float: left la first-letter invierte el error: con un tamaño de fuente mayor, el ancho del inline-block reduce.

Entonces, la pregunta: ¿hay alguna solución CSS para este error? Me está matando un poco.


Answer #1

Este error todavía existe, pero algunas de las correcciones ya no funcionan. Incluso después de activar un reflujo con una animación, el bloque en línea volvió al mismo tamaño para mí. No pude usar el truco de letter-spacing porque ya lo uso en la primera letra, eso es lo que me está causando el problema. Resolví el problema agregando esto al CSS para el selector afectado:

-moz-padding-end: *number of pixels to compensate*;

En este momento, moz-padding-end parece ser específico para Firefox, y puede agregar o eliminar ancho al final del bloque en línea. Debido a que este es un error específico de Firefox, eso me ayudó.


Answer #2

Sé que este hilo es bastante antiguo ahora, pero aparentemente este error aún no se ha solucionado.

El uso de la animation funciona pero hay un FOUT (Flash Of Unstyled Text) notable. Pude resolver el problema envolviendo la first-letter en un span . Esto soluciona tanto el problema de tamaño como el de FOUT, agrega elementos adicionales al marcado, por lo que depende de las necesidades de su sitio / aplicación si es la mejor opción.

.test {
    background: rgba(0,0,0,0.15); /* For visualisation */
    display: inline-block;
}

.test:first-letter {
    font-size: 2em;
}

.test2:first-letter {
    float: left;
}
.test3:first-letter {
    font-size: .5em;
}
<h1>Inline-block with bigger first-letter</h1>

<span class="test">Broken</span>
<br><br>
<span class="test"><span>F</span>ixed</span>


<h1>+ floating to first-letter</h1>

<span class="test test2">Broken</span>
<br><br>
<span class="test test2"><span>F</span>ixed</span>
 

<h1>small size for first-letter</h1>

<span class="test test3">Broken</span>
<br><br>
<span class="test test3"><span>F</span>ixed</span>

<h1>small size, floating first-letter</h1>

<span class="test test2 test3">Broken</span>
<br><br>
<span class="test test2 test3"><span>F</span>ixed</span>





firefox