div - title html css

Navegador compatible de navegador cruzado para listas

Question

Tengo una lista desordenada donde estoy tratando de controlar la sangría que cuelga. En los elementos que se desbordan en dos líneas, quiero que la segunda línea de texto se alinee directamente debajo de la línea de texto anterior (no debajo de la viñeta). Tengo esto para trabajar en Chrome exactamente como lo quiero. Sin embargo, está un poco apagado en Firefox e Internet Explorer.

Esto es lo que tengo actualmente:

<ul style="list-style: disc inside none; margin-left: 0; padding-left: 1em; text-indent: -1em;">
<li>50 – 180</li>
<li>950 – 2150</li>
<li>Dual IF: 70/140, L-Band & L-Band monitor (standard)</li>
</ul>

¿Hay alguna manera de hacer que este render sea el mismo en todos los navegadores?

Answer 1

Elimine text-indent , cambie list-style al outside y aplique un padding-left a sus elementos li :

ul {
list-style: disc outside none;
margin-left: 0;
padding-left: 1em;
}
li {
padding-left: 1em;
}

Answer 2

Lo único que tuve que agregar a la respuesta aceptada fue la sangría de texto ya que estaba usando las viñetas de fontello:

ul {
list-style: disc outside none;
margin-left: 0;
padding-left: 1em;
text-indent: -2em;
}
li{
padding-left: 1em;
}

Answer 3

Use un restablecimiento de CSS primero , luego ajuste su CSS en consecuencia.