display:inline-block;在各浏览器下的问题和终极兼容办法

一、IE 5.5、6、7 、8(Q)中display:inline-block;失效

兼容办法:

  • IE 5.5、6、7 、8(Q)中 block 元素对 inline-block 支持不完整,如果要达到类似的效果,需要先设置为 display:inline,然后使用
  • zoom:1 等触发 hasLayout。 IE 5.5、6、7 、8(Q)中 inline 元素欲达到 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等均可。

二、现代浏览器中 inline 和 block 元素 display:inline-block; 后均会产生水平空隙

其中IE 6、7、8(Q)的情况比较特殊

  • block元素display:inline-block;

  • inline元素display:inline-block;

解决方案:使用font-size:0;消除空隙

  • Safari 5.1.7 由于不支持 font-size:0 ,仍然存在空隙,需要使用负letter-spacing来消除Safari下的空隙。

  • 使用font-size:0;后,IE6、7 中始终存在的 1px 空隙,需要添加word-spacing:-1px;来解决。

三、终极的兼容所有浏览器的可复用性代码

 .dib-wrap {
font-size:;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
display: inline-block;
*display: inline;
*zoom:;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-4px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}

使用display:inline-block代替float的好处

可以通过 vertical:middle; 和 text-align:center; 轻易地实现元素的垂直居中和水平居中。

笔者注:此文并不是我的原创,只是笔者通过淘宝UED和其他的一些相关文章作的检验和总结。

参考资料:

display:inline-block;在各浏览器下的问题和终极兼容办法的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法

    当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F12 Debug查看报错原因,提示net::ERR_BLOCKED_BY_CLIENT错误,但当我们点击图片地址 ...

  3. 浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法

    转发网址:https://www.cnblogs.com/wenzheshen/p/7724065.html 当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F1 ...

  4. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  9. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

随机推荐

  1. tcp slowstart (TCP 慢启动)

    tcp slowstart (TCP 慢启动) 慢启动定义 慢启动,是传输控制协议使用的一种拥塞控制机制.慢启动也叫做指数增长期.慢启动是指每次TCP接收窗口收到确认时都会增长.增加的大小就是已确认段 ...

  2. 【BZOJ 5000 OI树】

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 107  Solved: 64[Submit][Status][Discuss] Description ...

  3. Tomcat学习笔记(一)

    Tomcat目录结构的认识 tomcat是Apache旗下的一个开源Servlet的容器,实现了对Servlet和JSP技术支持. 通过http://tomcat.apache.org/ 下载tomc ...

  4. 如何用cookie保存用户的登录的密码和用户名

    思路:绘制一个简单的登录界面的Servlet并要在此页面中读取保存密码和用户名的cookie--->在登录处理界面的servlet中把用户名和密码保存到cookie中 //登录界面的Servle ...

  5. 1257 背包问题 V3——分数规划

    N个物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi为整数),从中选出K件物品(K <= N),使得单位体积的价值最大. Input 第1 ...

  6. 华为上机测试题(数字字符串转二进制-java)

    PS:此题满分,可参考 /*  * 题目:数字字符串转二进制 * 描述: 输入一串整数,将每个整数转换为二进制数,如果倒数第三个Bit是“0”,则输出“0”,如果是“1”,则输出“1”. 题目类别: ...

  7. POCO库中文编程参考指南(2)基本数据类型(Poco/Types.h)

    POCO库中文编程参考指南(2)基本数据类型 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmail.com (# -> ...

  8. pythontips(1):打印模块的属性并执行

    import sys import site def print_all(module_): modulelist = dir(module_) length = len(modulelist) fo ...

  9. es6记录

    3.5? 一.const 1.冻结对象 const foo = Object.freeze({}); // 常规模式时,下面一行不起作用: // 严格模式时,该行会报错 foo.prop = ; 2. ...

  10. war导出问题myeclpise

    内附破解文件以及myeclipse10.7.1导出war问题解决办法一.原作者的PJ程序在myeclipse10.7.1环境下测试通过(win7 x64) 按照步骤操作就可以完成PJ过程.PJ前先将c ...