display:inline-block 另解

2010年01月21日 | HTML/CSS

inline-block是个好东西，谁用都知道。
但兼容是个问题（仅Opera、Safari、chrome、firefox3.x能完美呈现）

~~IE下可以通过触发hasLayout来模拟inline-block~~

纠正我一直以来的认知错误“ie不支持inline-block”：
IE5.5就已经支持inline-block了，可参考display Property的Remarks部分；但IE7及以下版本下给block元素设定inline-block需要使用*display:inline;*zoom:1;来修正。

麻烦的是firefox2.x
虽然有-moz-inline-block和-moz-inline-stack来模拟，但都或多或少有些问题

firefox2.x中使用-moz-inline-stack使用可能遇到的问题：（垂直居中）

可以使用-moz-box-align -moz-box-pack这2个firefox私类来稍作修正，但始终无法完美模拟。

在一次偶然中，我发现firefox还提供有另一个私有属性display:-moz-box;，它会根据-moz-box-orient的值来水平或垂直显示其子元素。
因此给-moz-inline-block元素的父级定义display:-moz-box;就可完美模拟inline-block了！（-moz-box-orient默认值为水平显示）
但因为-moz-box的定义，这个方法不适合有其他类型子元素的容器使用。

可点此查看示例

主要样式：

.link-ib,.link-ib span {
	display:inline-block;
	height:40px;
	line-height:40px;
	background:#FFCB06 url(btn.png) no-repeat;
	*display:inline;	/** 修正ie 无法给block元素设定inline-block **/
	*zoom:1;	/** 触发ie中inline元素的hasLayout **/
}
.link-ib {display:-moz-box;} /** for firefox2.x **/
.link-ib span {display:-moz-inline-block;} /** for firefox2.x **/
	.link-ib {
		padding-left:20px;
		color:#654005;
		font-size:16px;
		text-decoration:none;
		background-position:0 0;
	}
	.link-ib span {
		cursor:pointer;	/** 修正IE **/
		padding-right:20px;
		background-position:100% 0;
	}
	.link-ib:hover {
		color:#000;
		background-position:0 -40px;
	}
	.link-ib:hover span {
		background-position:100% -40px;
	}