2012-07-04 22 views
8

Este código se bloquea ie9 ya que tengo este problema en mi código ... cualquier trabajo será apreciado .. Esto no es un problema con las versiones anteriores de ie ... Gracias ..tr pantalla ninguno falla ie9

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head></head> 
    <body> 
     <table style="border-collapse: collapse"> 
      <tr id="firsttr"> 
       <td colspan="2"></td> 
       <td></td> 
      </tr> 
      <tr id="secondtr"> 
       <td></td> 
       <td style="border: 1px solid #D2D2D2">Move cursor here</td> 
       <td></td> 
      </tr> 
     </table> 
    </body> 
    <style type="text/css"> 
     #secondtr:hover { 
      display: none; 
     } 

    </style> 
</html> 

Incluso usando evento onclick se bloquea el navegador .. intente lo siguiente .. Mover el cursor aquí

<script type="text/javascript"> 
    function HideThis() 
    { 
     document.getElementById('secondtr').style.display = 'none'; 
    } 
</script> 
+0

confirmado que se trata reproducible. – leppie

+1

Su código intenta eliminar de la pantalla el objeto sobre el que se mueve el mouse. Es eso deseado? –

+0

Parece estar relacionado con: 'Excepción de primera oportunidad en 0x7645b9bc (KernelBase.dll) en iexplore.exe: 0x800706BA: El servidor de RPC no está disponible. – leppie

Respuesta

4

hay un error en IE9, pero la regla CSS es lógicamente indecidible:

Tan pronto como no se muestra nada más, el puntero del ratón no se movía más por lo que debe ser visible otra vez. Lo que significa que el mouse está sobre eso. Lo que significa que debe estar oculto ... lo que significa que debe ser visible ... etc.

Dicho de otro modo: la especificación no tiene sentido.

Dicho esto, este error es muy molesto ya que el código siguiente se estrella IE9 también:

$(window).ready(function(){ 
    $('#secondtr').mouseenter(function(){ 
     $('#secondtr').hide(); 
    }); 
}); 

Pero esto no sucede si se pone el controlador de eventos en un span (por ejemplo). Así que le sugiero que cambie su código HTML para evitar ocultar el tr en el que tiene una detección de vuelo estacionario.

1

Esto parece ser un error en IE9.

Cambiando display:none a visibility:hidden, verá el texto parpadear continuamente.

Lo único que se me ocurre es que el IE se atasca en un ciclo infinito o un stackoverflow.

Disculpe, no puedo proporcionar una solución.

+0

El ciclo infinito es normal (ver mi respuesta). –

+0

@dystroy: sí, vi (+1 en ello) – leppie

+0

@dystroy Si esto es un ciclo infinito ... intente con esto y dentro de la función oculte el tr mediante el establecimiento de display: none .. Usted se dará cuenta de que esto no es un bucle infinito ..

0

Si ocultando la TR es lo que desea, usted podría intentar algo como:

#secondtr:hover { 
    height: 0px; 
    padding: 0px; 
    margin: 0px; 
    border: 0px; 
    font-size: 0px; 
} 

Aquí está el código completo que trabajó para mí en IE, FF y Safari:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<TITLE> BLAH</TITLE> 
<style type="text/css"> 
#secondtr:hover, #secondtr:hover .secondTD { 
    height: 0px; 
    padding: 0px; 
    margin: 0px; 
    border: 0px; 
    font-size: 0px; 
} 
.secondTD{ 
    border: 1px solid #D2D2D2; 
} 

</style> 
</head> 
<body> 
<table style="border-collapse: collapse"> 
    <tr id="firsttr"> 
     <td colspan="2"> </td> 
     <td></td> 
    </tr> 
    <tr id="secondtr"> 
     <td></td> 
     <td class="secondTD">Move cursor here</td> 
     <td></td> 
    </tr> 
</table> 
</body> 
</html> 
6

I tienen el mismo problema y han encontrado una solución. En primer lugar, debería decir que el problema es real para cualquier fila de la tabla con estilo borderCollapse igual a colapso (no importa si se declara en línea o en cabecera) en IE9.

Mi solución:

function hideRow(tableNode, rowNode, hide){ 
    if(hide){ 
     if(window.navigator.userAgent.search('MSIE 9.0') != -1){ 
      var initValue = tableNode.style.borderCollapse; 
      tableNode.style.borderCollapse = 'separate'; 
      rowNode.style.display = 'none'; 
      tableNode.style.borderCollapse = initValue; 
     }else{ 
      rowNode.style.display = 'none'; 
     } 
    }else{ 
     rowNode.style.display = ''; 
    } 
} 

O incluso acortar:

function hideRow(tableNode, rowNode, hide){ 
    var initValue = tableNode.style.borderCollapse; 
    tableNode.style.borderCollapse = 'separate'; 
    rowNode.style.display = hide ? 'none' : ''; 
    tableNode.style.borderCollapse = initValue; 
} 
+0

+1 Para usted. Reemplazar 'tableNode.style.borderCollapse' por' tableNode.currentStyle.borderCollapse', try: 'var initValue = tableNode.style.borderCollapse || tableNode.currentStyle.borderCollapse; 'y luego:' if (initValue) {tableNode.style.borderCollapse = initValue; } ' –

Cuestiones relacionadas