现代浏览器的最新版都支持inline-block,只有该死的ie6、7不支持inline-block,但ie6、7可以通过

display:inline;
zoom:1;

来模拟

下面是inline-block兼容的代码:

view sourceprint?display:inline-block;

*display:inline;

*zoom:1;

width:100px;

vertical-align:top;

但是大家有没有发现,在firefox,safari,opera,ie8+中的 inline-block
元素之间会莫名其妙多出3px的间距,其实这个是换行符,如果将 inline-block 元素间的换行符去掉,这3px的间距就会消失了。

有没有在不影响代码美观的情况下去掉间距尼,答案是有的。

可以在inline-block的父元素中加上 :

 font-size:0;

然后在 inline-block 中将字体设回来。

使用font-size:0去掉inline-block元素之间的空隙的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  3. CSS HACK tab制表符导致行内元素之间的空隙如何解决

    <!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...

  4. 如何处理html中的内联元素之间水平空隙

    写HTML时把需要紧挨着的内联元素写在一行,设置其父容器的font-size为0,再设置内联元素的字体大小,例如: <!DOCTYPE html> <html lang=" ...

  5. 关于行内元素之间有空隙的问题,例如span与input之间

    问题如图: 想要的是下面的效果,而却出现上面的效果,解决方法如下: 对于行元素span或者input来说 很多人会用inline-block来显示他们,但是往往发现  中间会留一段小空隙 , 其实这个 ...

  6. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  7. 如何消除inline-block元素之间的间隙?

    一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...

  8. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  9. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

随机推荐

  1. Intellij Idea自动加载改动文件和自动自动热部署加载

    1:准备原料 我的Intellij Idea的版本是15. 之后tomcat自动加载修,你只需要在浏览器刷新一下页面即可. ************************************** ...

  2. MyEclipse下打开ftl文件

      转:http://blog.csdn.net/w410589502/article/details/51669028 1.Freemarker模板的文件后缀名 2.Freemarker其实是一种比 ...

  3. nginx反向代理与负载均衡

    一:nginx反向代理与负载均衡配置思路与用法 1.nginx反向代理:就是你去相亲时,媒婆就是这里的代理,让媒婆带你去见姑娘 2.nginx负载均衡:就是有很多的媒婆经过商量给你选出最适合你的姑娘, ...

  4. 给IIS添加网站配置权限

    1.新建一个网站,填好名字,路径和主机名端口等等 2.为网站添加一个用户 3.用户隶属于Guests,和IIS_IUSRS 4.把网站的完全控制权限赋给刚才的用户. 在网站右键--编辑权限--安全 或 ...

  5. 使sublimetext3在ubuntu下可以打中文和在windows的dos命令行下正常显示中文

    学习闲暇之余,总结一下在windows和ubuntu下使用sublimetext3遇到的问题 一.关于sublimetext3在windows的dos命令行下不能编译运行中文的解决方案: 因为dos命 ...

  6. iOS开发之UIPickerView

    1.使用方法 UIPickerView使用和UITableView大致类似.首先设置ViewController为数据源,然后遵守数据源协议< UIPickerViewDataRecouce&g ...

  7. SSM项目整合基本步骤

    SSM项目整合 1.基本概念 1.1.Spring Spring 是一个开源框架, Spring 是于 2003  年兴起的一个轻量级的 Java  开发框架,由 Rod Johnson  在其著作  ...

  8. 20155215 2016-2017-2 《Java程序设计》第5周学习总结

    学号 2006-2007-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 尝试捕捉错误对象,try,catch. 如何抛出错误对象,throw语法. error代表系统错 ...

  9. 老李分享:持续集成学好jenkins之Git和Maven配置

    老李分享:持续集成学好jenkins之Git和Maven配置   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...

  10. ElasticSearch Index API && Mapping

    ElasticSearch  NEST Client 操作Index var indexName="twitter"; var deleteIndexResponse = clie ...