html - How to make Chrome and IE display block hyperlinks correctly -

i have used following code make < > links fill content of container. both chrome , ie display < > link size of content.

i have tried explicit pixel height , important tags chrome still insist on making link size of content. link has no content , displays 0px height , width.

this how make block hyperlink?

html

<div class="mydiv">     <a href="#"></a> </div> 

css

.mydiv {     height: 50px;     width: 50px;     display: block; } .mydiv {     height: 100%;     width: 100%;     display: block; } 

here go - tested in chrome , ie , works in both:

here html:

<div class="abc">     <a href="http://www.google.com"></a> </div> 

and css:

div.abc { display:block ;     width:200px ;     height:50px ;     background:blue ; }  .abc { display:block ;     width:100% ;     height:100% ; } 

you can edit height , width in div.abc , hypertext link adjust accordingly.

demo here: http://jsfiddle.net/przax/