página - hipervinculos en html bloc de notas

La imagen no se puede hacer clic dentro del ancla solo en IE7

Question

Estructura html

<a>
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

El ancla no se puede hacer clic solo en IE7, sé que el problema ocurre debido a hasLayout; si eliminamos la altura y el ancho del tramo, funcionará bien.

Pero necesito hacer que funcione sin quitar altura y anchura.

EDITAR: Puede jugar con un ejemplo aquí: http://jsfiddle.net/rxcAb

Answer 1

Solución Solamente CSS

Tomás : modifiqué tu violín en un ejemplo de trabajo . Cambié su código para usar un span dentro de la etiqueta a porque no es válido tener un elemento de nivel de bloque estándar (un div ) en un elemento en línea ( a etiqueta). Dando el diseño de a etiqueta (utilicé inline-block ) y luego estableciendo una position:relative en ese span con un z-index: -1 empuja el span "debajo" de la etiqueta a y hace que IE7 reconozca la etiqueta como nuevamente activa. A continuación se muestra el código modificado utilizado en mi violín. Es posible que desee configurar un nombre de clase más genérico que mi ie7AFix (es probable que también desee apuntar a IE7 para aquellas propiedades CSS que solo son necesarias). Supongo que está variando el width y el height según las imágenes, y por lo tanto, por eso los tiene como un estilo en línea.

HTML

<a href="http://www.google.com/" class="ie7AFix">
  <span style="width:222px; height: 150px;">
    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
  </span>
</a>

CSS

a.ie7AFix {
    display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}

.ie7AFix span {
    border: solid #666 4px;
    display: block;
    position: relative;
    z-index: -1;
    line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}

.ie7AFix img { border: 1px solid red; }

Se actualizó el Fiddle con line-height agregada para hacer "navegador cruzado" si uno no quiere apuntar solo a IE7. Mantuve el width y la height en el html de span arriba, solo porque la pregunta original (tanto de gviswanathan como de Tomas) lo solicitó. Si no necesita establecer las dimensiones en el span por algún motivo, pero simplemente está tratando de hacer un borde doble en la imagen, entonces la respuesta de treintadot que se encuentra en el comentario a continuación es mucho más simple.

Answer 2

¿Has intentado usar el shim HTML5? Ayuda mucho con problemas causados ​​por hasLayout .

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 3

Ah, hasLayout

no es posible lograrlo en IE7 y aún mantener el ancho del tramo, si pudiera mostrar lo que está tratando de lograr en un violín de JS tal vez podamos ayudarlo, encontrar una forma de evitarlo, por ejemplo, y esto es solo una suposición. el ancho en el anchor con algo de relleno ayudaría a crear un área completamente pulsable y aún así permitiría restringir un espacio de "leyenda" si eso es lo que buscas ...

Ejemplo de solución no es una solución

CSS:

a {
  display: inline-block;
  background: #ff0; 
  max-width: 50px; 
  padding: 10px; 
  text-align: center;
}

img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}

HTML:

<a href="#">
   <img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
   <span>Some text and even longer</span>
</a>

Lo anterior es solo un pensamiento, y si no es lo que está buscando, proporcione una muestra de jsfiddle.net

Answer 4

Con jQuery, lo siguiente forzará todos los enlaces a funcionar, y tendrá el cursor ''puntero'':

$(document).ready(function () {

    $(''a'')
        .click(function () {        
            window.location = $(this).attr(''href'');
        })
        .hover(function () {
            $(this).css(''cursor'', ''pointer'');
        });

});

He probado esto simulando IE7 con IE8 en modo de vista de compatibilidad, pero no puedo garantizar que lo haga para IE7 por sí solo.

Es posible que desee aplicar esto de manera más selectiva (sospecho que, como tal, podría ralentizar el rendimiento del navegador anterior), en cuyo caso, aplique una clase (como <a href=''myClass''> ) a todos los enlaces que están rotos. y solo cambia $(''a'') a $(''.myClass'')

Answer 5

Dar las siguientes reglas CSS al elemento a:

{
    display:block;
    overflow:hidden;
}

Answer 6

Desde tu publicación, creo que querías una imagen en la que se pudiera hacer clic con el texto de información de intervalo. Espero que esto te ayude;)

http://jsfiddle.net/ajinkyax/v5KH5/3/

<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>

CSS:

.imgLink {display: block; width: 200px; text-align: center;}​

Answer 7

Puede que el problema sea que no haya definido href="#" dentro de su <a> TAG. Por lo tanto, coloque href="#" dentro de su <a> TAG. Escribe así:

<a href="#">
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

Answer 8

Si tienes algo como:

<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>

Simplemente agregue una propiedad de estilo al ancla como esta:

<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">

Esto hará que la div y todo lo que esté dentro de ella se pueda hacer clic en IE7 + y firefox & chrome.

Answer 9

Simplemente saca el SPAN de la IMG. El elemento IMG se puede diseñar con una clase como cualquier otro elemento, por lo que no necesita un espacio alrededor de él.

Answer 10

Una forma fácil de hacer esto es:

<p>
 <span><img></span>
 <span> Some text <span>
 <a></a>
<p>

p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`

Answer 11

Ver el violín para el código y la demostración.

Fiddle: http://jsfiddle.net/rxcAb/29/

Demostración: http://jsfiddle.net/rxcAb/29/embedded/result/

Funciona perfectamente en IE7, IE8, FF, Chrome, Safari.

No hay cambios en el código: ver abajo

<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
        <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>

Answer 12

Solo envuelve la etiqueta de anclaje dentro de Div o Span. Está funcionando en IE7.

Esta manera es incorrecta ..?