display:inline-block的bug 空白节点
display:inline-block的bug 当有空白节点出现的时候，就会有很大的间隙：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; }
#retrieve { padding: 19px 0 0 16px; }
#retrieve a { font-size: 14px; background: none repeat scroll 0 0 #F3F2EA; display: inline-block; font-weight: bold; height: 18px; line-height: 20px; margin: 0 1px; text-align: center; width: 18.5px; }
#retrieve a:hover { background: none repeat scroll 0 0 #FF0000; color: #FFFFFF; }
</style>
</head>
<body>
<div id="retrieve"><a href="#">A</a><a href="#">B</a><a href="#">C</a> <a href="#">D</a><a href="#">E</a><a href="#">F</a><a href="#">G</a><a href="#">H</a><a href="#">I</a> <a href="#">J</a><a href="#">K</a><a href="#">L</a><a href="#">M</a><a href="#">N</a><a href="#">O</a><a href="#">P</a><a href="#">Q</a><a href="#">R</a><a href="#">S</a><a href="#">T</a><a href="#">U</a><a href="#">V</a><a href="#">W</a><a href="#">X</a><a href="#">Y</a><a href="#">Z</a></div>
</body>
</html>
修正bug（给父元素加上font-size:0;）：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 * { margin: 0; padding: 0; } 8 a { text-decoration: none; } 9 #retrieve { padding: 19px 0 0 16px; font-size:0;} 10 //↑↑↑↑↑↑↑给父元素加font-size:0;↑↑↑↑ 11 #retrieve a { font-size: 14px; background: none repeat scroll 0 0 #F3F2EA; display: inline-block; font-weight: bold; height: 18px; line-height: 20px; margin: 0 1px; text-align: center; width: 18.5px; } 12 #retrieve a:hover { background: none repeat scroll 0 0 #FF0000; color: #FFFFFF; } 13 </style> 14 </head> 15 16 <body> 17 <div id="retrieve"><a href="#">A</a><a href="#">B</a><a href="#">C</a> <a href="#">D</a><a href="#">E</a><a href="#">F</a><a href="#">G</a><a href="#">H</a><a href="#">I</a> <a href="#">J</a><a href="#">K</a><a href="#">L</a><a href="#">M</a><a href="#">N</a><a href="#">O</a><a href="#">P</a><a href="#">Q</a><a href="#">R</a><a href="#">S</a><a href="#">T</a><a href="#">U</a><a href="#">V</a><a href="#">W</a><a href="#">X</a><a href="#">Y</a><a href="#">Z</a></div> 18 </body> 19 </html>
