display:inline-block;在各浏览器下的问题和终极兼容办法
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和其他的一些相关文章作的检验和总结。
参考资料:
- http://www.w3cplus.com/css/inline-blocks.html BY 99(译)
- http://ued.taobao.com/blog/2012/08/inline-block/ BY 一丝。
display:inline-block;在各浏览器下的问题和终极兼容办法的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F12 Debug查看报错原因,提示net::ERR_BLOCKED_BY_CLIENT错误,但当我们点击图片地址 ...
- 浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
转发网址:https://www.cnblogs.com/wenzheshen/p/7724065.html 当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F1 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
随机推荐
- tcp slowstart (TCP 慢启动)
tcp slowstart (TCP 慢启动) 慢启动定义 慢启动,是传输控制协议使用的一种拥塞控制机制.慢启动也叫做指数增长期.慢启动是指每次TCP接收窗口收到确认时都会增长.增加的大小就是已确认段 ...
- 【BZOJ 5000 OI树】
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 107 Solved: 64[Submit][Status][Discuss] Description ...
- Tomcat学习笔记(一)
Tomcat目录结构的认识 tomcat是Apache旗下的一个开源Servlet的容器,实现了对Servlet和JSP技术支持. 通过http://tomcat.apache.org/ 下载tomc ...
- 如何用cookie保存用户的登录的密码和用户名
思路:绘制一个简单的登录界面的Servlet并要在此页面中读取保存密码和用户名的cookie--->在登录处理界面的servlet中把用户名和密码保存到cookie中 //登录界面的Servle ...
- 1257 背包问题 V3——分数规划
N个物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi为整数),从中选出K件物品(K <= N),使得单位体积的价值最大. Input 第1 ...
- 华为上机测试题(数字字符串转二进制-java)
PS:此题满分,可参考 /* * 题目:数字字符串转二进制 * 描述: 输入一串整数,将每个整数转换为二进制数,如果倒数第三个Bit是“0”,则输出“0”,如果是“1”,则输出“1”. 题目类别: ...
- POCO库中文编程参考指南(2)基本数据类型(Poco/Types.h)
POCO库中文编程参考指南(2)基本数据类型 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmail.com (# -> ...
- pythontips(1):打印模块的属性并执行
import sys import site def print_all(module_): modulelist = dir(module_) length = len(modulelist) fo ...
- es6记录
3.5? 一.const 1.冻结对象 const foo = Object.freeze({}); // 常规模式时,下面一行不起作用: // 严格模式时,该行会报错 foo.prop = ; 2. ...
- war导出问题myeclpise
内附破解文件以及myeclipse10.7.1导出war问题解决办法一.原作者的PJ程序在myeclipse10.7.1环境下测试通过(win7 x64) 按照步骤操作就可以完成PJ过程.PJ前先将c ...