使用CSS的锚链接可点击区域-IE问题

Question

I have a menu as follows, I need to enable entire anchor area to be clickable, unfortunately it seems to none.

HTML

<div><a href='#'>Home</a></div>    
<div><a href='#'>Contact us</a></div>    
<div><a href='#'>Feedback</a></div>    
<div><a href='#'>Products</a></div> 

CSS

div {height:40px; padding-top:5px; border:#999 solid 1px; margin-bottom:5px;}
a{color:#FFF; font-size:15px;text-shadow: -1px -2px 2px #212121; filter: dropshadow(color=#212121, offx=-1, offy=-2); padding: 13px 0 0 16px; display:block; height:25px; width:100%; zoom:1; line-height: 30px;  }

Fiddle as http://jsfiddle.net/3Hyty/2/

Updated: Problem really in IE

Answer 1

Your CSS is fine, the issue is the jsfiddle blocks link clicks by default unless they open in a new tab. Make the links have

target='_blank' 

and they work in jsfiddle as shown here: http://jsfiddle.net/V3qML/1/ .

Obviously for your production environment just use your code as is :)

Answer 2

Add an onClick to the div and style the div to use cursor:hand or cursor:pointer depending on browser see How can I make the cursor a hand when a user hovers over a list item?

Applied to your jsFiddle: http://jsfiddle.net/3Hyty/5/

The operative line being:

<div onClick="javascript:document.location.href='#';" style="cursor:hand;cursor: pointer;">Feedback</div>

Answer 3

HTML5 allows for block elements inside anchors, which forces the anchor to the dimensions of the block element inside it. Alternatively, use spans and style them inline-block or block:

<a href='#'><div>Home</div></a>

or:

<a href='#'><span class="block">Home</span></a>

<style>
span.block {display: block;}
</style>

Answer 4

a{
  margin:0 10px;
  display:block;
  float:left;
  width:100%;
  color:#F00; 
  font-size:15px;
  text-shadow: -1px -2px 2px #212121; padding: 0 0; 
  height:25px; 
  zoom:1; 
  line-height: 30px;
}

It was able to do with float left