Sliding door code for 100% click area

friends who study standards will usually come into contact with css sliding door technology in the process of learning. maybe you have also read this article "sliding door technology in css". if you haven't been exposed to it or haven't read it yet, it doesn’t matter if you have read the above article or have forgotten the content. you can click on the article link above to understand or review it first.

in the sliding door example in the article "sliding door technology in css", if you carefully experiment, you may have discovered that there is a 9-pixel blind spot in the link area that cannot be clicked, and under ie, only text can be clicked partially sized, the entire button block cannot be clicked. what we may expect is that the entire button block can be clicked and no blind spots are allowed.

so how should we achieve it? let's discuss some solutions together:

first of all, for convenience, let's move the code in "sliding door technology in css":
xhtml part:

 
 
home
 
news
 
products
 
about
 
contact
 
 

css part:

#header { float:left; width:100%; background:#DAE0D2 url("bg.gif") repeat-x bottom; font-size:93%; line-height:normal; } #header ul { margin:0; padding:10px 10px 0; list-style:none; } #header li { float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a { float:left; display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #header a {float:none;} /* End IE5-Mac hack */ #header a:hover { color:#333; } #header #current { background-image:url("left_on.gif"); } #header #current a { background-image:url("right_on.gif"); color:#333; padding-bottom:5px; }