模拟兼容性的 inline-block 属性
作者:blank 来源:怿飞博客 发布时间:2008-04-08 12:37:00
标签:inline-block,兼容,display,css
一年前网上还找不到关于 inline-block 属性的文章,为了方便大家更好的理解该属性,当时总结整理了篇《display: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;
font-size:0;*/ /* 如需隐藏文字,可用这两个属性 */
overflow:hidden; /* 隐藏溢出的内容 */
vertical-align:middle; /* 行内垂直居中,针对 Opera 比较大的偏离 */
width:?px; /*?为任意非auto值*/
height:?px; /*?为任意非auto值*/
扩展阅读:
0
投稿
猜你喜欢
- 代码如下:--新增表字段 ALTER procedure [dbo].[sp_Web_TableFiled_Insert] (
- 摸到她了!青翠的衣衫,奶白的肌肤,捧在手上的感觉真是太好了,心里美滋滋的。《悟透JavaScript》,一本偶然之作,终于成书并出版了。本书
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- sql server 全文检索有两种搜索方式,一种是contains,另一种是freetext。前者是包含,类似于 like '%关
- 代码如下: <!-- #include file="../conn.asp" --> <!-- #in
- Translate From:stevesouders原文:高性能网站设计:不要使用@import在高性能网站设计的第五章,我简要的提到@i
- 水平线对于制作网页的朋友来说一定不会陌生,它在网页的版式设计中是非常有作用的,可以用来分隔文本和对象。
- 生成静态页的方法有很多种,我比较喜欢用xmlhttp的方法生成,因为我不用考虑很多东西,我只要把动态的asp页面编写好就行了。<% s
- 阅读上一篇:交互设计模式(二)-Pagination(分页,标记页数) Tagging(标签)问题摘要用户往往想通过流行或最详尽的主题来浏览
- 1.SQL Server 2005中的存储过程并发问题问:我在SQL Server2005中遇到了并发问题。我持有车票的公共汽车上有一些空闲
- 最近心血来潮加上有点闲情,动手写了第一个JavaScript版的俄罗斯方块Easy Tetris.先上Easy Tetris俄罗斯方块游戏截
- Check In/Out功能简介:该功能是专门针对多用户管理而预设的。即多用户使用多帐号管理同一站点。
- gzip 是什么东东呢?百科跟我们说gzip是GNU zip的缩写,它是一个 GNU 自由软件的文件压缩程序。…gzip 的基础是 DEFL
- 在SQL Server数据库中,有min server memory与max server memory两个内存选项。数据库管理员合理设置这
- 有时候在一个页面用到收放功能的时候时,总有一个虚线框在触发收放的功能按钮上,显得特别刺眼,那如何去除这个虚线框呢?在IE下,需要在标签 a
- * 前,我在公司做设计,当时就已经做到技术总监,Photoshop是自学的,当时觉得全世界比我Photoshop强的人也不在多数。七年前,
- 【1】 以XML 返回 (1)未定义属性的 select logisticsId,logisticsName from LogisticsC
- 在OOCSS中怎么定义“对象”?对象类似JAVA中的类,保持着OO的特征。一个CSS对象由4部分组成:可能是一个或多个DOM节点的HTML由
- 这些包可以独立使用,也可以与其他包一起使用以满足复杂的业务需求。Integration Services 可以提取和转换来自多种源(如 XM
- 抽象工厂模式Abstract Factory Pattern是什么抽象工厂模式是一种创建型模式,它提供了一种创建一系列相关或相互依赖对象的最