使用css-IE问题锚定链接可点击区域

时间:2013-01-07 17:02:16

标签: html css

我有一个如下菜单,我需要启用整个锚区域才能点击,不幸的是它似乎没有。

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中确实存在问题

4 个答案:

答案 0 :(得分:0)

您的CSS很好,问题是默认情况下jsfiddle阻止链接点击,除非它们在新选项卡中打开。使链接

target='_blank' 

并且它们在jsfiddle中工作,如下所示:http://jsfiddle.net/V3qML/1/

显然,对于您的生产环境,只需按原样使用您的代码:)

答案 1 :(得分:0)

将onClick添加到div并设置div的样式以使用cursor:hand或cursor:指针取决于浏览器,请参阅How can I make the cursor a hand when a user hovers over a list item?

应用于你的jsFiddle: http://jsfiddle.net/3Hyty/5/

操作线是:

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

答案 2 :(得分:0)

HTML5允许锚点内的块元素,这会强制锚定到其中的块元素的维度。或者,使用spans并将它们设置为inline-block或block:

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

或:

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

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

答案 3 :(得分:0)

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

能够做左浮动