当前位置:  编程技术>WEB前端

模拟兼容性的 inline-block 属性

    来源: 互联网  发布时间:2014-10-04

    本文导语:  而现在对于 inline-block 属性运用的需求也越来越多,可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性(注:原来只有 Opera、Safari 支持),但 IE6、IE7 可以通过触发 hasLayout 来模拟,Firefox2 有-moz-inline...

而现在对于 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值*/

    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 电路教学模拟器 稳恒电路模拟器
  • php模拟登录 php curl模拟登录教程大全
  • 在Android模拟器上模拟GPS功能总是null的解决方法
  • Intel HAXM为Android 模拟器加速解决模拟器运行慢的问题
  • php模拟qq登录 php模拟登录实例
  • ◆◆◆◆◆◆◆j2me中,用repaint()在同一地方重画图象,当我画到二十几遍后,手机模拟器就出错或者程序自动退出。我想是不是由于重画时,以前的图片好保存在模拟器的内存中,当重画到一定数时,内存不够,便出错了。还是其他的原因?请问如何解决?
  • 指令级机器模拟器 GXemul
  • FC模拟器 Nintendulator
  • NOSQL iis7站长之家
  • 在线模拟考试系统 PHPems
  • EFL设计示波器,模拟量输入的问题
  • PSP模拟器 JPcsp
  • 电路模拟器 Qucs
  • JavaScript 模拟器库 Virtjs
  • 单元测试模拟框架 PowerMock
  • Linux游戏模拟器 Xmame
  • 微控制器模拟器 PICsim
  • NDS模拟器 DeSmuME
  • FC 模拟器 Nestopia
  • PS2模拟器 PCSX2


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3