a 设定高度宽度，又不会自动断行 及 inline几种识别

<a href=”#”>nhyypppe</a>

a 标签默认的 display 属性是 inline，width、height 是无效的。

对 a 设置 display:block，虽然可以解决宽度高度的问题，但元素会自动断行，无法达到我们需要的效果。有没有什么方式可以实现类似 img 标签那样，既可以设定高度宽度，又不会自动断行呢？

答案是肯定的。在 Opera 和 Webkit 中支持一个 CSS2 的属性 display: inline-block。利用这个属性，在 Opera 下即可完全实现我们所需的效果，但在其它浏览器下就不行了。

display 属性另外还有一个不太常用的值 display: inline-table。

display: inline-block    //Opera 和 Webkit 支持 standard browsers
display: inline-table    //除了 IE 以外的所有浏览器正确支持
display: inline     //IE Only
display: -moz-inline-stack;   //Firefox only

所以：

.element-class {
     display: -moz-inline-stack;   //Firefox only code
     display: inline-block;        //some standard browsers
     zoom: 1;                      //IE only
     *display: inline;             //Only IE know this code (CSS Hack)
}

通过这样的代码就可以实现在各种浏览器中表现一致的 inline-block 了。这种方式有个小缺憾，就是无法通过 W3C CSS 验证。当然，要想通过验证也很简单，可以对除了 IE 之外的浏览器发出 inline-table 属性的样式表，对于 IE 单独发出一份 IE Only 的 CSS。