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 ...
随机推荐
- 【bzoj5047】空间传送装置 堆优化Dijkstra
题目描述 n个点e条边的有向图,每条边是m种类型之一.第i种类型在第x时刻通过所花费的时间为$(a_i*x+b_i)\mod c_i+d_i$.可以在某个点停留.问:在s时刻从1号点出发,到达每个点所 ...
- 【noip2016d2t3】状压DP+巧妙优化
题意可以简单这样考虑 给出n^2个集合(每个集合的元素不超过n),包含某个元素的集合至少有n个,选出最少的集合,使这些集合的并包含n个元素 n最大只有18 可以考虑状压n个元素,然后枚举n^2个集合 ...
- [poj] 2074 Line of Sight || 直线相交求交点
原题 给出一个房子(线段)的端点坐标,和一条路的两端坐标,给出一些障碍物(线段)的两端坐标.问在路上能看到完整房子的最大连续长度是多长. 将障碍物按左端点坐标排序,然后用房子的右端与障碍物的左端连线, ...
- uoj228:基础数据结构练习题
题意:http://uoj.ac/problem/228 sol :线段树开根操作 对于节点x,可以在max[x]-min[x]<=1时直接做,转化为区间减或区间覆盖 #include< ...
- 用iFrame模拟Ajax上传文件
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
- altera ip 核小究
用quartus的MegaWizard工具生成一个乘法器multiplier,会在工程目录下产生 multiplier.qip (可选) multiplier_bb.v (可选) multip ...
- bzoj4897 [Thu Summer Camp2016]成绩单
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4897 [题解] 第一次看这题想的是f[l,r]的区间dp发现仅记录这两个好像不能转移啊 会出 ...
- LPTSTR\LPCTSTR\LPWSTR\LPCWSTR 字母的意思 及 区别
标签: 杂谈 分类: VC char* 是指向ANSI字符数组的指针,其中每个字符占据8位(有效数据是除掉最高位的其他7位),这里保持了与传统的C,C++的兼容. LP的含义 ...
- android hook 框架 ADBI 如何实现so注入
Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2 如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...
- 非常好!!!Linux源代码阅读——内核引导【转】
Linux源代码阅读——内核引导 转自:http://home.ustc.edu.cn/~boj/courses/linux_kernel/1_boot.html 目录 Linux 引导过程综述 BI ...