display:inline-block的bug 空白节点

最新推荐文章于 2024-04-30 22:06:17 发布

aogy04408

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量107

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/the0ne/articles/3257656.html

版权

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>

转载于:https://www.cnblogs.com/the0ne/articles/3257656.html

aogy04408

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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="...
复制链接

扫一扫