In Internet Explorer i tag DIV vuoti non sono cliccabili

In una situazione come questa:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Test DIV empty</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <style type="text/css">
	#sgartDivEmpty {
		z-index: 1000;
		cursor:pointer;
		position:absolute;
		top:20px;
		left:20px;
		width:81px;
		height:61px;
	}
  </style>
</head>
<body>

<div style="position:relative">
  <div id="sgartDivEmpty"></div>
  <img src="PuntoLuce.png" alt="" style="width:200px;height:200px:overflow:hidden;" />
</div>
  <script type="text/javascript">
  $(document).ready(function () {
	$("#sgartDivEmpty").click(function(){ 
        alert("click");
      });
  });
  </script>
</body>
</html>
ovvero con il div (id = sgartDivEmpty) posizionato in modo assoluto sopra ad una immagine, Internet Explorer versione 7, 8 e 9 non scatena l'evento click.
In realtà il div è cliccabile ma solo se ci si sposta verso il bordo inferiore.

In Firefox funziona correttamente.

Per aggirare il problema ci sono 2 soluzioni:

1) Aggiungere allo style del div un font molto grande e inserire un carattere nel div (<div id="sgartDivEmpty"> *</div>)

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Test DIV empty</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <style type="text/css">
	#sgartDivEmpty {
		z-index: 1000;
		cursor:pointer;
		position:absolute;
		top:20px;
		left:20px;
		width:81px;
		height:61px;

		/* aumentato il font */
		font-size: 1000px;
		overflow:hidden;
	}
  </style>
</head>
<body>

<div style="position:relative">
  <!-- aggiunto un asterisco per non avere il tag vuoto -->
  <div id="sgartDivEmpty"> *</div>
  <img src="PuntoLuce.png" alt="" style="width:200px;height:200px:overflow:hidden;" />
</div>
  <script type="text/javascript">
  $(document).ready(function () {
	$("#sgartDivEmpty").click(function(){ 
        alert("click");
      });
  });
  </script>
</body>
</html>

2) impostare il colore di background

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Test DIV empty</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <style type="text/css">
	#sgartDivEmpty {
		z-index: 1000;
		cursor:pointer;
		position:absolute;
		top:20px;
		left:20px;
		width:81px;
		height:61px;

		/* imposto il background e lo rendo trasparente (anche il bordo purtroppo) */
		background-color:#ffffff;
		filter:alpha(opacity=1); 
	}
  </style>
</head>
<body>

<div style="position:relative">
  <!-- posso avere il div vuoto -->
  <div id="sgartDivEmpty"></div>
  <img src="PuntoLuce.png" alt="" style="width:200px;height:200px:overflow:hidden;" />
</div>
  <script type="text/javascript">
  $(document).ready(function () {
	$("#sgartDivEmpty").click(function(){ 
        alert("click");
      });
  });
  </script>
</body>
</html>
Tags:
Browser25 CSS19 Errori120 HTML74 JavaScript184
Potrebbe interessarti anche: