现代浏览器的最新版都支持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. curl中通过json格式吧post值返回到java中遇到中文乱码的问题

    首先是: curl中模拟http请求: curl -l 127.0.0.1:8080/spacobj/core/do?acid=100 -H "token:101hh" -H &q ...

  2. cuda线程/线程块索引小结

    内建变量: threadIdx(.x/.y/.z代表几维索引):线程所在block中各个维度上的线程号 blockIdx(.x/.y/.z代表几维索引):块所在grid中各个维度上的块号 blockD ...

  3. 【iOS】7.4 定位服务->2.1.3.3 定位 - 官方框架CoreLocation 功能3:区域监听

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  4. Android Weekly Notes Issue #249

    Android Weekly Issue #249 March 19th, 2017 Android Weekly Issue #249 本期内容包括: 一个设计的实现Demo讨论; Kotlin的C ...

  5. python中input()与raw_input()的区别到底是啥?-----marsggbo原创作品为你解答

    首先先给出总结:input () = int(raw_input()) 有图有真相!!! 先看看input的例子: 可见用input键入得到int类型的数据,那如果输入一些非int类型的会怎么样呢? ...

  6. js 操作 cookie

    js 操作 cookie 的方法如下: //设置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.set ...

  7. cat: can't open '/lib/modules/2.6.35.3-571-gcca29a0/modules.dep': No such file or directory

    在使用modprobe 或者modinfo  cat: can't open '/lib/modules/2.6.35.3-571-gcca29a0/modules.dep': No such fil ...

  8. 【Egret】里使用video标签

    egret里使用Html5的Video标签 egret里使用Html5的Video标签的demo: 链接:http://pan.baidu.com/s/1nuNyqRR 密码:x58i //----- ...

  9. 【转】关于swf安全沙箱冲突:不能被本地访问

    错误提示:SWF 文件不能被本地访问 不能访问本地只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源 错误信息:SecurityError:Error #2148: SWF ...

  10. MySQL---连接器(python如何操作数据库媒介,基于python语言)

    MySQL — 连接器 连接器的概念 它们往往是一类Python包,或者是一类已经写好的Python库.这些库提供了我们Python去连接数据库服务器的基本功能. ​ 既然它是一个包,那么我们首先学会 ...