2011-02-03 18 views
6

Me enfrento a un problema increíble. Tengo un hipervínculo en una imagen en el sitio de mi cliente. Está funcionando en IE, pero cuando abro la misma página en Chrome/Mozilla, no muestra el puntero de anclaje y tampoco ocurre nada al hacer clic. Mi código de enlace esEtiqueta de anclaje que no funciona en firefox y cromo

<a href="Home.aspx?ModuleID=1"> 
    <img src="Images/Logo.gif" border="0"/> 
</a> 

¿Alguien tiene alguna idea de lo que podría ser el problema?

Respuesta

0

Sin el código fuente HTML completo, señalaré que este ancla está anidada o después de algún elemento que no tiene una etiqueta de cierre.

Publique código fuente HTML completo si este no es el problema.

Puede encontrar este problema fácilemte mediante la validación de su documento con:

Es el validador del W3C oficial de HTML/XHTML, por lo que si algún elemento no está cerrado, que va señala cuál necesitas corregir!

EDIT: Después de ver su código fuente HTML publicado en los comentarios de la respuesta ... ¿dónde está la declaración del tipo de documento (DOCTYPE)? ¡Olvidaste agregarlo!

Añadir esto al comienzo de su documento HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Cuando usted no proporciona un tipo de documento, navegadores muestran las páginas web en modo "quircks", que es un modo de compatibilidad que no podrá prestar tu página como esperabas Más información sobre eso aquí:

Vamos a saber si esto resuelve su problema!

+0

Lo comprobé con http://validator.w3.org/ no detecté ninguna etiqueta. Puedo compartir el código completo tan pronto como me conecte al servidor – surenv2003

+0

No se puede publicar el código completo debido al límite de usuario – surenv2003

+0

Uhm, ¡use http://pastebin.com/ y publique un comentario con el enlace! ;) –

8

Comprueba si estás utilizando css z-order en absoluto en la página. Los z-orders incorrectos pueden hacer que los botones y enlaces no funcionen.

4

Estoy enfrentando el mismo problema. This suggestion (agregando posición: relativo al div que lo contiene) parece abordarlo, pero estoy haciendo un posicionamiento absoluto y necesito solucionar esto de otra manera. Pensé que podría ayudar a alguien más, sin embargo.

+1

Agregar la posición de atributo css a relativo funciona a la perfección! – Andres

+0

¡Trabajó para mí también! –

11

simples de trabajo en torno a: Esto funciona en todos los navegadores que he probado hasta ahora utilizar document.getElementById([anchor tag]).scrollToView(true);

Ejemplo: --from--

<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;"> 

--to--

<a id="ShowMeHow2" name="ShowMeHow2"> </a> 
+0

Esto funciona, pero no actualiza la barra de direcciones del navegador. Vea cómo actualizar la barra de direcciones del navegador y el historial en [Actualizar la barra de direcciones con una nueva URL sin hash o volver a cargar la página] (https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url- sin-hash-o-reloading-the-page) – johnsampson

0

tuve un caso similar. En mi caso. estaba tratando de alinear 3 divs usando flotadores izquierda/derecha. Uno de ellos tenía posición: atributo relativo. Una vez que eliminé esto, las etiquetas de anclaje de Firefox funcionaron. En lugar de agregar un atributo adicional. Espero que esto ayude a otros.

+0

-Recogiendo mi experiencia y el otro comentario sobre la posición de adición: relativo parece que el error en el navegador de Firefox & co es que dentro de un contenedor div dado necesitan un posicionamiento consistente en todo el interior divs. De lo contrario, los anclajes no funcionan. – Farjad

0

He encontrado que a veces puede tener erróneamente otro elemento con la misma ID. En mi caso, era una etiqueta de opción, que no se puede mover a la vista. Como tal, le recomendaría que pruebe $('#yourid') para ver si hay etiquetas inesperadamente con la misma ID.

5

Lo que encontré que funcionó para mí con respecto al mismo problema con Chrome * solamente, fue NO adjuntar el identificador de anclaje dentro de un elemento de nivel de bloque PERO adjuntar la llamada.

ex.

<body> 
    <a id="top" name="top"> </a> 
    <p>...</p> 
    <p><a href="#top">Back to Top</a></p> 
    </body> 
    <!-- /end ex. --> 

Hope this helps :) funciona en todos los navegadores.

-Ben

+2

Me gustaría agregar que para cumplir con la validación W3C HTML5, debe eliminar el atributo de nombre, ya que está obsoleto en HTML5. –

0

he pasado las últimas horas de este problema, en la página etiquetas de anclaje trabajando en Firefox e IE, pero no cromo. No soy un desarrollador profesional, así que no sé por qué, pero parece que en algunos casos, Chrome no lee las etiquetas de los divs apilados y lo envía a un lugar deseado en la misma página. Tengo alrededor de ella mediante la adición de un identificador de intervalo después de mi un identificador ... - por lo que se ve así:

<a href="#ID_NAME"></a> 
... 
<a id="ID_NAME><a/><span id="ID_NAME"></span> 

Probado en Firefox, Chrome y Safari. Sin embargo, no tengo IE en esta máquina para probar.

+1

Esta debería ser una pregunta separada (no una respuesta, entonces podrías obtener algunos votos atrasados ​​(no tengo el representante para votar a la baja), pero en tu caso tienes identificadores duplicados ("ID_NAME" - que en cualquier caso debería ser minúscula) y no tener cotización de cierre después de la identificación para el a. –

0

Otro posible problema que puede ocurrir con esto (aunque probablemente no sea el caso aquí) es que podría haber alterado la declaración del puntero css para la etiqueta a, por ej.

a { 
    cursor: default; 
} 

Si ese es el caso, los efectos de desplazamiento y haciendo clic en el enlace deberían seguir funcionando.

0

Parece tonto, pero una vez tuve el mismo problema. Acabo de colocar enlaces de anclaje en una página existente como parte de la mejora. Extrañamente, los enlaces se pueden hacer clic en IE pero no en Chrome/Firefox.

Al observar detenidamente, encontré que hay una secuencia de comandos existente que elimina el enlace de la etiqueta de anclaje para la funcionalidad de impresión. Las etiquetas de anclaje agregadas son parte de la misma página y, por lo tanto, tenían este problema. Agregué si la condición con los identificadores de los anclajes recién agregados para que omitan la funcionalidad agregada para eliminar los enlaces de anclaje.

1

no ponen el carácter # en el ancla, sólo en el enlace

Correct <a name="top">[top of page]</a> <a link="#top">[link]</a> 

Incorrect <a name="#top">[top of page]</a> <a link="top">[link]</a> 
0

Para Firefox, aplicar esta secuencia de comandos en la sección HEAD de la página.

<script> 
    $(document).ready(function(){ 
     var h = window.location.hash; 
     if (h) { 
      var headerH = $('#navigationMenu').outerHeight(); 
      $('html, body').stop().animate({ 
       scrollTop : $(h).offset().top - headerH + "px" 
      }, 1200, 'easeInOutExpo'); 

      event.preventDefault(); 
     } 
    }); 
</script> 

Para Chrome, utilice lo siguiente en la sección HEAD de su página.

<script> 
    $(document).ready(function() { 
     var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 
     if (window.location.hash && isChrome) { 
      setTimeout(function() { 
       var hash = window.location.hash; 
       window.location.hash = ""; 
       window.location.hash = hash; 
      }, 300); 
     } 
    }); 
</script> 

Solo copie y pegue AMBOS scripts en la sección HEAD de su página. ¡Funcionó para mí! :)

1

Tuve un problema similar en Chrome en el que el cursor no cambiaba a una mano señalada cuando se movía sobre mis enlaces de navegación, y los enlaces no respondían cuando se hacía clic en ellos. Al agregar la propiedad z-index con un valor de 999 a mi elemento de anclaje en mi hoja de estilos, se devuelve el comportamiento esperado.

Cuestiones relacionadas