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

  1. displayinline
  2. zoom1

来模拟

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

  1. view sourceprint?display:inline-block;
  2.  
  3. *display:inline;
  4.  
  5. *zoom:1;
  6.  
  7. width:100px;
  8.  
  9. vertical-align:top;

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

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

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

  1. font-size0

然后在 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. (4)Object对象的几个常用方法

    Object对象是java中对象的始祖,其有一些方法是经常需要我们来改写的: toString方法 该方法是Object的方法,Object的这的方法返回的是对象的文件结构加上对象的hashcode, ...

  2. Omi框架Store体系的前世今生

    原文链接-https://github.com/AlloyTeam/omi Store 体系 先说说Store系统是干什么的!为什么要造这样一个东西?能够系统架构带来什么? 当我们组件之间,拥有共享的 ...

  3. ipconfig显示IP地址情况

    1.以太网适配器 Local Area Connection 若电脑是本地连接,则ipv4地址是本机的ip地址,默认网关一般为本机所连接路由器的地址. 2.无线局域网适配器 Wireless Netw ...

  4. NIO(四、Selector)

    目录 NIO(一.概述) NIO(二.Buffer) NIO(三.Channel) NIO(四.Selector) Selector 前面两个章节都描述了Buffer和Channel,那这个章节就描述 ...

  5. dellR720重启找不到启动引导项,手动选择也无用。

    机器重启后显示 no boot device available.(如下图)检查bios中设置也是没问题的,因为装完系统后根本没动过什么.F11手动选择启动项也还是会跳到这里来. 这台机子做的Raid ...

  6. java实现八种排序算法并测试速度(详细)

    算法代码: /** * Created by CLY on 2017/3/17. */ package pers.cly.sorting; /** * 排序工具类,里面包含各种排序方法 */ publ ...

  7. Zkdash安装

    zkdash是一个zookeeper的管理界面,也可以作为任何基于zookeeper的配置管理工具,比如:Qconf 1.拉取代码 #git clone https://github.com/irea ...

  8. 无线接收信号强度(RSSI)那些事儿

    本文由嵌入式企鹅圈原创团队成员黄鑫供稿. 本文所述的原理适用于所有无线传输技术,只是用蓝牙来举例.应该说,嵌入式企鹅圈更加偏重于嵌入式和物联网.安卓技术原理方面的知识分享和传播,其次才是实践,尽管很多 ...

  9. aps.net验证控件的异常处理

    异常错误信息: WebForms UnobtrusiveValidationMode 需要"jQuery"ScriptResourceMapping.请添加一个名为 jquery ...

  10. windows server 定期备份数据库脚本

    将以下文件保存为.bat脚本,在计划任务中添加定时任务运行此脚本即可.脚本中的备份目录,数据库目录和压缩文件目录请自行修改. @echo off rem 当前路径切换到备份数据库目录 cd D:\wa ...