Link over whole div is not working when cursor is over contained text in IE
I have this code for demonstration. It makes my link spread over whole div, which works great in Firefox, but in IE when I move cursor over text it changes to text cursor and link doesnt work there... I tried fiddling with z-index but no results... any sugg开发者_如何学JAVAestions?
I need to fill my div with other divs with their own content, so
a style="display: block"
is not an option, an i also want to avoid Javascript like
onclick="location.href=
I have a solution for you. In HTML5 it would be valid to use <div>'s inside of an <a> tag. But since you cannot change your language and HTML4.01 does not allow block elements inside of an <a> I would suggest faking it. By that I mean use <span>'s inside of the <a> tag instead and style them to act as a <div>. Here is a working example: http://jsfiddle.net/DzpjT/11/
HTML:
<body>
<a href="http://www.google.com">
<span class="fakediv">Annoying text la lallalalalalalalalal</span>
<span class="fakediv">Annoying text la lallalalalalalalalal</span>
</a>
</body>
CSS:
a{
display: block;
width:700px;
height:500px;
margin: 10px;
background-color: lightblue;
color: black;
text-decoration: none;
}
span.fakediv{
float:left;
clear: both;
display: block;
margin: 10px 20px;
cursor: pointer;
}
Change your code to this:
<a href="http://www.google.com/" style="display:block;position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 10;"></a>
Should work fine now. I added display block to the anchor tag which will cause it to behave like a div.
Like brenjt said, I think you simply need to add a height attribute to your css. He threw some other stuff in there too which is all good, but in my experience it's not having height set explicitly in your CSS that often causes this.
I had this same problem but since the content I was attempting to cover had heading and paragraph tags, I was hesitant to start mocking css classes up to mimick paragraphs and headings unnecessarily.
While I was debugging the issue, I added a background colour to my a tag. This clearly demonstrated that the tag was completely covering the content from just above it in the DOM, as it was supposed to. The entire area was clickable. As soon as I removed the background colour, hovering over the text converted the cursor to the insert icon and didn't register a click.
So, seeing as I was already employing a 1px transparent png on the page anyway (for fixing custom fonts in IE), I just set that as the background image on the a tag.
It works.
加载中,请稍侯......
精彩评论