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

//页面结构

<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.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之内联元素块级化/区域大小/文字和图标的位置的更多相关文章

  1. CSS内联--与块级元素区别

    内联元素:1.内联元素(inline)不会独占一行,相邻的内联元素会排在同一行.其宽度随内容的变化而变化. 2.内联元素不可以设置宽高 3.内联元素可以设置margin,padding,但只在水平方向 ...

  2. HTML元素分类 块级元素 内联元素 块级内联元素

    概述 HTML中存在许多元素,如<h1>,<p>,<a>,<block>,<image>,这些元素可分为三类,依次是块级元素,内联元素,块级 ...

  3. 前端学习 -- Css -- 内联元素的盒模型

    内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...

  4. [HTML/CSS]盒子模型，块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  5. 前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结

    页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div c ...

  6. CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

  7. html之内联元素与块状元素；

    html之内联元素与块状元素 一.html之内联元素与块状元素 1.块状元素一般比较霸道,它排斥与其他元素位于同一行内.比如div,并且width与height对它起作用. 2.内联元素只能容纳文本或 ...

  8. css 内联元素inline 行框全解

    首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...

  9. css 内联与块

    内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素. 如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了 ...

随机推荐

  1. 2019-2020-1 20199302《Linux内核原理与分析》第一周作业

    2019.9.13 说明:可能是因为网速问题,笔记本上一直没有办法加载实验楼的学习界面,所以没有使用实验楼提供的环境,而是用的ubuntu进行的所有实验. 二.学习第二章,对shell命令有了一个大概 ...

  2. admin站点管理

    admin中的显示 class Saltstack_GroupAdmin(admin.ModelAdmin): list_display = ['group_name','salt_minion_id ...

  3. 用provide/inject来实现简单的vuex状态管理功能

    在开发的时候,经常会涉及到组件之间的通信.简单的有父子组件的通信,兄弟组件的通信通常可以借助Bus来进行.当然也可以用vuex来进行状态管理,但是,有时候用vuex未免有把简单的问题复杂化. 如果要进 ...

  4. GSS4 D - Can you answer these queries IV

    //给你一个序列,有两种操作: //1.给定x和y,将区间[x,y]内的数开方 //2.询问区间和 // // 因为一个longlong类型的数最多开6次方就变成了1,所以对于1操作,我们暴力修改, ...

  5. LibreOJ #528. 「LibreOJ β Round #4」求和

    二次联通门 : LibreOJ #528. 「LibreOJ β Round #4」求和 /* LibreOJ #528. 「LibreOJ β Round #4」求和 题目要求的是有多少对数满足他们 ...

  6. biplot双标图

    biplot 双标图 在页面中全部崩溃 句法 biplot(coefs) biplot(coefs,Name,Value) h = biplot(___)   描述 例 biplot(coefs)在矩 ...

  7. [golang]Go内嵌静态资源go-bindata的安装及使用

    使用 Go 开发应用的时候,有时会遇到需要读取静态资源的情况.比如开发 Web 应用,程序需要加载模板文件生成输出的 HTML.在程序部署的时候,除了发布应用可执行文件外,还需要发布依赖的静态资源文件 ...

  8. Deepin Create/Delete Folder refresh

    Did u have a problem whth the deepin file manager,Everthime I create/delete a Folder of File i have ...

  9. 在linux中设置优先使用ipv4,而不是ipv6

    背景: 有时候更新源的时候默认使用ipv6,而ipv6下载数据时候总出现问题. 所有想默认出口的时候优先使用ipv4出口访问,而不是ipv6. 要使用ipv4 连接优先而不必禁用ipv6,需要修改ga ...

  10. 0915 N校联考

    树上路径(phantasm) 题目背景 Akari是一个普通的初中生. 题目描述 Akari的学校的校门前生长着一排n棵树,从西向东依次编号为1∼n.相邻两棵树间的距离都是1.Akari上课的教学楼恰 ...