css vertical-align属性的一些理解与认识(一)

2020-05-11 08:07:26易采站长站整理

2. 再者关于百分数值,百分值与数值,以我的眼光看去,代表了不同的思想,以及心态。前者代表着灵活,自由与开放,后者有严谨,精确,安稳之意。CSS中支持百分值的属性还不少,例如width/height,line-height,font-size,这里的vertical-align属性也是其一。提到百分值,必然牵扯到相对于那个属性(或值),例如宽度百分比都是相对于父块状元素的宽度值的,font-size的百分值是相对于向外的第一含有font-size属性的层的font-size大小而言的,而这里的vertical-align,有些不拘一格,是相对于此标签继承的line-height值决定的。例如,如下示例代码:

复制代码
.test{vertical-align:-10%;}

假设这里的.test的标签继承的行高是20px,则这里的

vertical-align:-10%
所代表的实际值是:
-10% * 20 = 2(像素)
。不过事情没有这么简单,CSS中的line-height是个非常精深的属性,建议您看看我之前写的这篇文章:css行高line-height的一些深入理解及应用,所以遇到像IE6/IE7这样吃三鹿奶粉长大的浏览器肯定会出点篓子的。什么篓子呢,就是“IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。”您可以看看我处理的以小数值line-height继承的vertical-align百分比显示对比图[参展对象:IE6(观众扔鸡蛋)和Firefox3.6(美女送鲜花)]:

IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height 张鑫旭-鑫空间-鑫生活

如果您现在使用的就是IE6或是IE7或是IE6/7内核的浏览器,同时相对这个bug有所见识

3. 最后关于其他属性,像是bottom,middle等,我是懒得说什么了,为何?可以看看下面这张兼容性表:

.buggy{color:#f30;}
.full{color:green;}
.browers th{background:#34538b; color:white;}
.minorversions th{background:#beceeb; font-weight:normal; font-family:Arial, Helvetica, sans-serif;}兼容性(vertical-align)

Internet ExplorerFirefoxSafariOperaChrome