模拟兼容性的 inline-block 属性

而现在对于 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性（注：原来只有 Opera、Safari 支持），但 IE6、IE7 可以通过触发 hasLayout 来模拟，Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性（这两个属性的比较引用自秦歌的《display:inline-block的应用两例》）。

在实际应用中 -moz-inline-box 会存在元素间的对齐等问题，虽然 Firefox 还有一个私有属性 -moz-box-align 来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说 -moz-inline-stack 的表现更像 inline-block ，这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ，如果一个 display:-moz-inline-stack; 的元素外层元素是 display:inline; 即会使 Firefox 中其包含的链接不可点，这个需要用 position:relative; 来解决。

最终我们模拟的代码如下：


代码如下:

display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持，IE 下触发 inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性，也可以用 -moz-inline-box */

zoom:1; /*IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字，可用这四个属性 */
/*另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0; */

overflow:hidden; /* 隐藏溢出的内容 */

vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */

width:？px; /*？为任意非auto值*/
height:？px; /*？为任意非auto值*/

赞 (0)

相关推荐

  • 块元素block element和内联元素inline element

    内联级元素(inline-level element)中试图插入块级(block-level element)元素.这样做是不允许的.唯一的能在内联元素中插入块级元素的例外是object标签.那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢?. 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"."form"这个

  • 如何消除inline-block属性带来的标签间间隙

    1.给inline-block元素设置一个父元素. 设置父元素的font-size:0:.子元素font-size设置成合适大小,如果不设置子元素font-size,子元素会继承父元素的0: 2.给inline-block元素设置一个父元素.(letter-spacing:字符间距) 设置父元素的letter-spacing为-4px或-8px,除谷歌是-8px外,其余是-4px.同样要设置子元素的letter-spacing:0:否则会 继承父元素,造成子元素内文字变形. 经过试验,统一设置成

  • 模拟兼容性的 inline-block 属性

    而现在对于 inline-block 属性运用的需求也越来越多,可惜依旧只有 Firefox3 beta.IE8 beta.Opera.Safari 支持 inline-block 属性(注:原来只有 Opera.Safari 支持),但 IE6.IE7 可以通过触发 hasLayout 来模拟,Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性(这两个属性的比较引用自秦歌的<display:inline-block的应用两例>). 在实际应用

  • javaScript 利用闭包模拟对象的私有属性

    JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域.作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument.内部中的函数中的this指向全局对象,argument指向内部函数的函数参数).我们可以利用这种属性来模拟面向对象中的私有属性. 复制代码 代码如下: var myObject=function(value){ var value=value || 0; return{ increment:function(num){ val

  • 一篇文章让你看懂IOS中的block为何再也不需要WeakSelf弱引用

    一篇文章让你看懂IOS中的block为何再也不需要WeakSelf弱引用

    前言: 最近都在折腾Sagit架框的内存释放的问题,所以对这一块有些心得. 对于新手,学到的文章都在教你用:typeof(self) __weak weakSelf = self. 对于老手,可能早习惯了到处了WeakSelf了. 这次,就来学学,如何不用WeakSelf. 1:从引用计数器开始: 这里先设计一个TableBlock类: @interface BlockTable : NSObject typedef void (^AddCellBlock)(); @property (nona

  • iOS Block解开多年以来一直的误解

    iOS Block解开多年以来一直的误解

    首先来了解下什么是Block (1)Block是OC中的一种数据类型,在iOS开发中被广泛使用 (2)^是Block的特有标记 (3)Block的实现代码包含在{}之间 (4)大多情况下,以内联inline函数的方式被定义和使用 (5)Block与C语言的函数指针有些相似,但使用起来更加灵活 这张图是我在2015年的时候发现的新大陆,那时候也知道block是一种特殊的数据类型.也是一种特殊的对象(不同于NSObject).在执行的时候务必要先if判断一下,否者crach.我给一个block变量赋

  • vue2模拟vue-element-admin手写角色权限的实现

    目录 权限 路由权限 store存储路由 router添加路由 菜单权限 按钮权限 准备:存储按钮标识 指令 函数 权限 路由权限 静态路由:固定的路由,没有权限.如login页面 动态路由:根据不同的角色,后端返回不同的路由接口.通过meta中的roles去做筛选 store存储路由 //地址:store/modules/permission import { routes as constantRoutes } from '@/router' ​ // 根据meta.roles去判断该角色是

  • swift闭包和OC block类型的使用

    之前看过一段swift,一直不知道OC中的block,即swift中的闭包是怎么实现的.今天就在网上搜索了一下,同时对比了一下OC中block类型的实现方法,然后写了一个Demo测试一下. 使用说明: swift版本 1.声明类型 typealias hideShowView = (Int) -> Void 2.声明属性 var muFunc:hideShowView? 3.传递参数 func didSelectedToHideView(hideFunc:@escaping (Int)->Vo

  • javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下: ///----------------------------------------------------------------------------

  • JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    1.Object类 在JS中,Object是所有类的基类,使用Object类来创建自定义对象时,可以无需定义构造函数(constructor,prototype,hasOwnProperty(property)) var per = new Object(); per.name = 'zhangsan'; per.age = ; alert(per.name + per.age); 我们想在程序中得到一个对象变量,只要能存储大量数据即可,这个时候,我们可以考虑使用Object类.Object类避

  • iOS中Block的回调使用和解析详解

    iOS中Block的回调使用和解析详解

    Block 回调实现 先跟着我实现最简单的 Block 回调传参的使用,如果你能举一反三,基本上可以满足了 OC 中的开发需求.已经实现的同学可以跳到下一节. 首先解释一下我们例子要实现什么功能(其实是烂大街又最形象的例子): 有两个视图控制器 A 和 B,现在点击 A 上的按钮跳转到视图 B ,并在 B 中的textfield 输入字符串,点击 B 中的跳转按钮跳转回 A ,并将之前输入的字符串 显示在 A 中的 label 上.也就是说 A 视图中需要回调 B 视图中的数据. 想不明白的同学

随机推荐