使用CSS的錨鏈接可點擊區域-IE問題

Question

我有一個菜單，如下所示，我需要使整個錨區域都可單擊，但不幸的是似乎沒有。

的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;  }

小提琴作為http://jsfiddle.net/3Hyty/2/

更新：IE中確實存在問題

Answer 1

您的CSS很好，問題是jsfiddle會默認阻止鏈接點擊，除非它們在新標簽頁中打開。 使鏈接有

target='_blank' 

並且它們在jsfiddle中工作，如下所示： http : //jsfiddle.net/V3qML/1/ 。

顯然，對於您的生產環境，只需按原樣使用代碼即可：)

Answer 2

將div添加到onClick並設置div的樣式，以根據瀏覽器使用cursor：hand或cursor：pointer來查看用戶將鼠標懸停在列表項上時如何使光標成為手形？

應用於您的jsFiddle： http : //jsfiddle.net/3Hyty/5/

操作線是：

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

Answer 3

HTML5在錨點內允許使用塊元素，這會將錨點強制為其內部的塊元素的尺寸。 或者，使用跨度並以內聯塊或塊樣式設置它們的樣式：

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

要么：

<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;
}

能夠向左浮動