1

Tengo un problema con el renderizado HTML/CSS.

Cómo es posible que de éste código:

<div class="gal-preview">
    <div class="thumbnail">
        <a href="#" class="link-thumbnail">
            <img src="img/submissions/01/over_the_hedge.jpg">
            <div class="info">
                <div class="title">The hedge must be jumped!</div>
                <a>AAAA</a>
            </div>
        </a>
    </div>
</div>

Me renderice esto:

introducir la descripción de la imagen aquí

Es introducir el link AAAA que tengo de prueba, y todo se descuadra de manera anormal.

El CSS es el siguiente:

.gal {
    padding: 5px;
    .gal-preview {
        width: 20%;
        height: 15vw;
        float: left;
        padding: 5px;
        .thumbnail {
            position: relative;
            height: 100%;
            background-color: #6a6a6a;
            a.link-thumbnail {
                .position(absolute, 0, 0, 0, 0);
                display: block;
                text-decoration: none;
                img {
                    max-width: 100%;
                    max-height: 100%;
                    .position(absolute, 50%, initial, initial, 50%);
                    transform: translate(-50%, -50%);
                }
                .info {
                    padding: 10px;
                    .position(absolute, 0, 0, 0, 0);
                    .title {
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        color: #f0f0f0;
                    }
                    .author {
                        .position(absolute, initial, 10px, 10px, 10px);
                    }
                }
            }
        }
    }
    &::after {
        .afterClear;
    }
}
.position(@position, @top: initial, @right: initial, @bottom: initial, @left: initial) {
    position: @position;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}
.afterClear {
    content: '';
    display: block;
    clear: both;
}

Añado JSFIDDLE con únicamente la primera celda de prueba con este código: https://jsfiddle.net/vo3d6zk9/

El objetivo de tener un a dentro del otro, es que si hago clic en toda la celda, exceptuando el AAAA que sería otro enlace, me llevara al detalle de esa imagen. No tengo problemas en colocar el enlace AAAA fuera, pero me ha dejado atónito y quiero saber básicamente porque rederiza de esta manera.

1
  • Por lo visto es eso, un <a> dentro de otro <a> provoca ese desorden.
    – Zander
    Commented el 3 feb. 2017 a las 9:22

1 respuesta 1

4

Un a dentro de otro es inválido en html y no hay una descripción formal de cómo manejar ese caso, por lo que cada motor lo hace a su manera y el resultado es relativamente impredecible.

Por cierto, si se diera el caso de que el DOM se estructure como lo planteas, al hacer click en el a de adentro el evento se propagaría por el árbol y también generaría un click en el a exterior.

La mejor forma de hacer lo que quieres es reemplazar el a de adentro por otro elemento, y detectar el click directo con JavaScript, frenar la propagación con event.stopPropagation() y luego ejecutar la acción deseada.

1
  • Ok, merci por la aclaración, ese detalle no lo conocía. Bueno, lo he conseguido hacer colocando el enlace interior fuera. Aunque pensaba que no lo haría, y que el click sería como en jQuery, el clicado aunque tuviera padre, haría caso al hijo.
    – Zander
    Commented el 3 feb. 2017 a las 9:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.