[SOLUCIONADO] No me funciona 'text-decoration: none'

Kepler · #1 (**permalink**) 04/03/2013, 06:56

Estimados amigos, tengo estas sencillas reglas CSS:

<style>
div {color:red; text-decoration:underline;}
span {color:blue; text-decoration: none;}
</style>

Y este texto HTML:

<div>Este texto está subrayado <span> pero este span no.</span> Aquí continúa el subrayado.</div>

El problema es que la frase completa aparece subrayada. La cadena encerrada entre <span>...</span> se muestra de color azul (correcto), pero también subrayada (incorrecto, creo). ¿No debería aparecer sin subrayar?

He probado en las últimas versiones de Chrome y Firefox y el comportamiento es igual en ambos.

Muchas gracias por ayudarme con esta duda.

al_limon · #2 (**permalink**) 04/03/2013, 07:33

Prueba con aplicarle un class al span :)

Kepler · #3 (**permalink**) 04/03/2013, 07:44

Hola, ni siquiera me funciona aplicando un style a <span>.

Este es el código fuente completo de la página:

<html>
<head>
<style>
div {color:red; text-decoration:underline}
span {color:blue; text-decoration: none}
</style>
</head>

<body>
<div>Este texto está subrayado <span style="text-decoration: none"> pero este span no.</span> Aquí continúa el subrayado.</div>
</body>
</html>

El resultado es la frase "Este texto [...] subrayado." completamente subrayada, incluido el texto encerrado entre <span>...</span>.

pzin · #4 (**permalink**) 04/03/2013, 07:46

No te va a funcionar de ninguna manera, ni con clase ni sin ella.

El asunto es que el subrayado es como si fuese una única unidad que se aplica al elemento. No es siquiera que span lo herede, sino que viene definido por div.

Kepler · #5 (**permalink**) 04/03/2013, 08:02

Hola, pero entonces ¿cómo intercalo dentro de un <div> subrayado un poco de texto sin subrayar? ¿Subrayando frase a frase, y dejando sin tocar lo que no quiero que se subraye?

¿Qué explicación tiene este comportamiento tan aparentemente raro?

Un saludo...

emprear · #6 (**permalink**) 04/03/2013, 08:08

Si lees la especificación
http://www.w3.org/TR/CSS21/text.html...ext-decoration

te vas a encontrar con

Cita:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor

Css3 incorpora la propiedad text-decoration-skip para corregir eso, pero no he visto aún que ningún navegador lo soporte

Saludos

Tecna · #7 (**permalink**) 04/03/2013, 10:29

Buenas,

además cada navegador lo interpreta a su manera. Se aplica a todas las cajas generadas por ese elemento y a todos sus descendientes que estén en el flujo normal. La única forma de que no se aplique es flotar o posicionar absolutamente el elemento al que no se quiera aplicar, pero eso seguramente creará nuevos problemas y como ya he dicho no funciona en todos los navegadores.

Kepler · #8 (**permalink**) 04/03/2013, 10:31

Aquí:

http://www.sidar.org/recur/desdi/traduc/es/css/text.html#q3

también te da la explicación, traducida al español:

Cita:

Esta propiedad describe las decoraciones que se agregan al texto de un elemento. Si la propiedad es especificada para un elemento a nivel de bloque, afecta a todos los descendientes a nivel de línea del elemento. Si es especificada para (o afecta) un elemento a nivel de línea, afecta a todas las cajas generadas por el elemento.

O sea, que hay que ir subrayando (o tachando, etc) párrafo a párrafo, línea a línea, o palabra por palabra si hace falta

...

Bueno, por lo menos ya está resuelto el misterio, muchas gracias por las respuestas y un saludo cordial...