<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。
转载于:https://www.cnblogs.com/n666/archive/2010/02/20/2190954.html
相关资源:超链接的宽度和高度直接设置不起作用的解决方法