标签：
今天在做CSS那些事的时候，发现一个有意思的现象； 不同字体设置，会显示出不同的效果或者说异常
先看代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>跟随标题时间的新闻列表——2</title> 5 <meta charset="utf-8"> 6 <style> 7 .news_list *{ margin:0; padding:0; list-style: none; font:normal 12px/22px "SimSun", Verdana, Arial, Helvetica, sans-serif;} 8 /*.news_list *{ margin:0; padding:0; list-style: none; font:normal 12px/22px "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif;}*/ 9 /* 这里发现一个有意思的现象，当这里的字体设置为宋体时候，可以正常显示出新闻标题和时间，但是改成微软雅黑之后，就无法正常显示？？！！ 10 11 个人推断是雅黑的字体宽度比宋体大，所以会出现以上情况,这时候雅黑的宽度，和后面span的宽度加起来已经超过了li的宽度，所以就换行显示了。 12 */ 13 14 .news_list { width: 300px;} 15 .news_list h3 { height: 24px; font-size: 14px; font-weight: bold; color: #e8e8e8; background-color: #666} 16 .news_list li { float: left; width: 300px; height: 22px;overflow: hidden;} 17 .news_list li a { float: left; width: 230px; margin-right: 70px;} 18 /*增加右补丁给span让出空间*/ 19 .news_list li a:hover { text-decoration: none; color: #f32600;} 20 .news_list li span { float: left; color: #999; margin-left: -65px;/*利用负边距让起紧挨新闻标题*/} 21 22 </style> 23 24 </head> 25 26 <body> 27 <div class="news_list"> 28 <h3>体育新闻</h3> 29 <div class="content"> 30 <ul> 31 <li><a href="#">切尔西夺冠庆祝大游行穆帅笑容迷人切尔西夺冠庆祝大游行 穆帅笑</a><span>2015-05-25</span></li> 32 <li><a href="#">戛纳闭幕：侯孝贤获最佳导演 法国电影夺金棕榈</a><span>2015-05-25</span></li> 33 <li><a href="#">中国首次为境外非政府组织立法 业内多存忧虑</a><span>2015-05-25</span></li> 34 <li><a href="#">央视抨击微商传销背后：自生自灭将成趋势</a><span>2015-05-25</span></li> 35 <li><a href="#">切尔西夺冠庆祝大游行穆帅笑容迷人切尔西夺冠庆祝大游行</a><span>2015-05-25</span></li> 36 </ul> 37 </div> 38 </div> 39 </body> 40 </html>
显示效果如下：
margin-right: 70px;这里的值应该加大，比如改成 margin-right: 90px;
而span后面的负边距应该在绝对值上面也增大，比如改成：margin-left:-75px;
然后页面显示就正常了
标签：
原文地址：http://www.cnblogs.com/zhangxg/p/4529262.html
