Enlace HTML con relleno y estilo CSS activo no funciona

El enlace HTML con relleno y el estilo CSS activo no funciona en Google Chrome, Apple Safari, Opera, Mozilla Firefox. Sin embargo, funciona en Internet Explorer 8.Enlace HTML con relleno y estilo CSS activo no funciona

Aquí hay un código de ejemplo. Intenta hacer clic en Pila: el enlace no funciona, haz clic en Desbordamiento: el enlace funciona. Me refiero a las obras: navegue al sitio de StackOverflow.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>css active padding href problem</title> 
     <style type="text/css"> 
      a{ 
       display: inline-block; 
       background:#CCC; 
       border:1px solid #666; 
       padding:0 35px 0 0; 
      } 
      a:active{ 
       padding:0 0 0 35px; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <p>Click on <i>Stack</i> - href does not work. 
       Click on <i>Overflow</i> - href works. 
       All browsers are affected. 
       Except IE.</p> 
      <a href="http://stackoverflow.com/">StackOverflow</a> 
     </div> 
    </body> 
</html>

¿Por qué no funciona en la mayoría de los navegadores?

Edición 2: Si cambia: activa a: hover, entonces todo funciona como se esperaba en todos los navegadores - pulsación se produce y el navegador se desplaza a stackoverflow.com

Datos 3: Para probar que es posible hacer clic en área de relleno se puede cambiar el estilo de:

<style type="text/css"> 
    a{ 
     padding:0 0 0 35px; 
    } 
</style>

Si el enlace "se mueve", como alguien ha mencionado, a continuación, por qué es posible hacer clic en ya "movido" vínculo?

Fuente

2010-11-25 Maris B.

código actualizado - fondo y el borde añadido para aclarar ese objeto no se mueve. –

con el acolchado del texto se aleja de la que hizo clic. Este es su código: http://jsfiddle.net/ctrlfrk/3KsRx/

mantenga presionado el botón del mouse en 'Apilar' y verá que el texto se aleja de debajo del mouse.

¿Qué estás tratando de lograr? Esto está funcionando como debería. Si Internet Explorer sigue el enlace, entonces está mal.

[Editar] Aclarando:

El verdadero problema aquí es que un evento de 'clic' sólo parece disparar si el destino del evento mousedown coincide con el destino del evento mouseup. Al hacer clic en el texto de su ejemplo, el destino del mousedown es text node que es un elemento secundario de la etiqueta anchor. Este text node se aleja, por lo que el destino del evento mouseup es simplemente la etiqueta anchor.

Con: desplazarse, el nodo de texto se aleja antes de hacer clic, por lo que el destino del evento mousedown es la etiqueta anchor, y el evento mouseup es también la etiqueta anchor, por lo que se sigue el enlace.

[/ Editar]

Fuente

2010-11-25 20:56:16 david

El texto se aleja, pero el fondo y el borde no. ¿Estás diciendo que Anchor solo puede ser texto y no el área de relleno? Además, esto no explica: pase el mouse –

He editado la respuesta con la posible causa de su problema. – david

Acabo de probar, y eliminar el texto del ancla de hecho soluciona el problema. –

Intente cambiar el relleno con margen, A medida que se cambia el relleno, la posición del elemento cambia también.

a { 
    margin:0 0 0 35px; 
}

Para los navegadores (Firefox, Chrome, etc) Un clic del ratón válida es aquella que es presiona y se suelta el mismo elemento.

EDIT: no puedo cambiar el comportamiento de navegador (hay solución a la css puro), pero se puede usar javascript para obtener este hecho

<a href="http://stackoverflow.com/" onmousedown="window.location=this;">StackOverflow</a>

EDIT: : hover obras en lugar : activa debido a la razón como elemento no cambia de posición entre el tiempo de prensado y de liberación a tiempo

Fuente

2010-11-25 20:11:16 Ish

debe usar margen en lugar de relleno (el problema es cambiar la posición del elemento) – Ish

Vea el código actualizado. Con el relleno, el objeto no se mueve. Cuando se usa margen - movimientos de objeto. Necesito relleno. –

onmousedown funciona, pero no es fácil de usar. onmouseup también funciona, y tiene un efecto secundario, que puede hacer clic en cualquier lugar y liberar en el ancla. onclick es lo más deseable, pero no funciona. Todavía esperando una mejor solución. Actualmente onmouseup parece la mejor solución. Gracias. –

¡He encontrado una solución! http://jsfiddle.net/rydl/Yu6vp/3/

David tiene razón, el problema está causado por el nodo de texto en movimiento. Por lo tanto, la solución debe evitar que se haga clic en el nodo de texto. He utilizado el anclaje de: después de la pseudo-elemento para cubrir todo el botón, mientras que ser invisible:

a:after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ' '; 
    height: 100%; 
    width: 100%; 
}

Fuente

2013-02-26 22:58:10 criedel

Brillante! Funcionó para mí :) –

Tuve un problema similar al presionar el mouse en un enlace, pero moviendo ligeramente el cursor. En este caso, a veces los navegadores pensaban que quería arrastrar y el clic no se activaba. ¡Gracias por esto! – antitoxic

la mejor respuesta de todos los tiempos: uso un: estado activo con un diseño ligeramente diferente (digamos 1px menos para acolchado superior para simular preaparación de espacio 3D), así que había 2 áreas de línea horizontal de 1px, detrás y debajo de la etiqueta de enlace (pero dentro del enlace área) donde el clic no funcionó, trató de jugar con la altura de línea en su lugar, etc., lo mismo. Pero este ingenioso soluciona el problema normal/activo de la zona de clics de forma definitiva. – dmidz

Enlace HTML con relleno y estilo CSS activo no funciona

Respuesta

Cuestiones relacionadas