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

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

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

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

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

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

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

两种方法,酌情选择。

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

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

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

inline-block之后的内联元素

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

ie8有变化

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

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

ie6没变化

ie8还有点纠结

最终方案

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

IE6/IE8文本位置靠左1px

IE8图标差1px

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

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

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

前端研究CSS之内联元素块级化/区域大小/文字和图标的位置
<!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.csdn.net/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>
前端研究CSS之内联元素块级化/区域大小/文字和图标的位置

 

 

 

前端研究CSS之内联元素块级化/区域大小/文字和图标的位置,布布扣,bubuko.com

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

上一篇:网站性能优化之应用程序缓存-中篇


下一篇:系统架构师-基础到企业应用架构-业务逻辑层