100% sliding door code in the click Area

100% friends in the sliding door code learning standard in the click area will generally be exposed to CSS sliding door technology during the learning process. Maybe everyone has read this article "Sliding Door Technology in CSS". if you have not touched or have not read the above or forgotten content, you can click the link of the above article to learn about or review it.

In the example of a sliding door in CSS, you may have carefully tested and discovered that there are nine pixel blind spots in the connection area that cannot be clicked, and in IE, only the text part size can be clicked, and the entire button block cannot be clicked. However, we may expect that the entire button block can be clicked, and blind spots are not allowed.

So how can we implement it? Next we will discuss some solutions:

First, for convenience, we should first move the code in CSS Sliding Door Technology:
XHTML section:

    
 
 
      
  
  
Home
      
  
  
News
      
  
  
Products
      
  
  
About
      
  
  
Contact
    
 
 
  

CSS section:

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