前端研究CSS之内联元素块级化/区域大小/文字和图标的位置-优快云博客

本文详细探讨了如何优化网页中常见小按钮的设计，将文字与小图标结合，通过调整CSS实现简洁而高效的效果。讨论了合并背景图的局限性及内联元素块级化的技巧，提出了在不同浏览器中的兼容性解决方案。

做了一天的小按钮基本都是文字+小图标的组合，问题挺多处理的不好，现在总结一下做个了断。

//页面结构
<span class="b">
  <a href="#" title="订阅博客">订阅博客</a>
  <em class="ico"></em>
</span>

其实结构可以很简单一个a元素设置padding-right或者padding-left的距离设置添加背景图标。

但是这样的话用合并的背景图不好使，尤其是一个图标反复用在对应不同大小元素的时候，每次都需要对css做出调整，而且对背景图标的位置要很好的前期规划。

这种父元素套文本和ico的方法虽然增加了dom数，但是开发和反复使用还是很方便的。

两种方法，酌情选择。

没有添加宽和高的内联元素

仔细看看没有一个浏览器是一样的

inline-block之后的内联元素

ie8有变化

设置宽100px 高12px和inline-block之后的内联元素

ie6没变化

ie8还有点纠结

最终方案

IE6/IE8文本位置靠左1px

IE8图标差1px

最后我决定就到这了，有人肯定会说用通过hark能调整到最最完美，是的。

可是文字图标的大小不同肯定还会有很多细微的变化，项目里的变化更是。。。

想想明天还有很多工作要干，我决定先睡了。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>内联元素块级化文字和图标的位置</title>
  <style type="text/css">
  *{margin: 0;padding: 0;line-height: 1;}
  a{text-decoration: none;}
  a:hover{text-decoration: underline;}
  .ico{background: url(http://static.blog.youkuaiyun.com/images/ico_view.png) no-repeat;position: relative;display: inline-block;}
  .b{font-size: 12px;width:65px;height:12px;margin:200px auto;background-color: #ececec;border: 1px solid #ccc;text-align: center;margin-left: 20px;font-size: 0;display: inline-block;overflow: hidden;}
  .b a{font-size: 12px;}
  .b em{width: 10px;height: 10px;}
  </style>
</head>
<body style="padding-top:20px;">
  
<span class="b">
  <a href="#" title="订阅博客">订阅博客</a>
  <em class="ico"></em>
</span>
</body>
</html>