模拟兼容性的 inline-block 属性
作者:blank 来源:怿飞博客 时间:2008-04-08 12:37:00
一年前网上还找不到关于 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值*/
扩展阅读:
标签:inline-block,兼容,display,css
0
投稿
猜你喜欢
SQL中自己创建函数 分割字符串
2008-11-20 16:13:00
sql如何在Access中选择指定日期前的记录?
2010-06-17 12:47:00
再谈CSS样式表书写风格
2009-03-30 16:09:00
ASP使用fso遍历文件及文件夹列出文件名
2008-10-27 19:32:00
oracle 查询表名以及表的列名
2009-07-26 09:33:00
DW MX新功能试用:嵌套模板
2008-02-03 11:35:00
如何计算ASP页面的加载时间/载入时间?
2009-11-25 20:10:00
好用的asp防SQL注入代码
2008-10-24 08:36:00
在ASP中使用SQL语句之2:用WHERE子句设置查询条件
2009-04-21 13:03:00
aspjpeg组件asp代码实例使用详解
2008-12-14 10:33:00
Javascript优化五大原则
2007-10-30 13:49:00
asp连接MYSQL数据库的连接字符串(参数OPTION)
2009-03-09 18:24:00
DreamweaverMX 2004打造细线表格
2008-10-01 09:39:00
如何在网页中制作虚线表格
2010-10-20 20:07:00
CSS解决未知高度的垂直水平居中自适应问题
2009-03-17 17:06:00
设计地址栏透明icon图标方法
2008-10-25 16:42:00
JavaScript的目的及历史
2007-10-17 18:53:00
动态加载JavaScript的小实践
2009-11-12 12:38:00
JavaScript的9个陷阱及评点
2007-08-28 15:10:00
FrontPage XP设计教程4——Css样式表的应用
2008-10-11 12:25:00