谈谈vertical-align的text-bottom和text-top

最新推荐文章于 2022-11-30 15:15:14 发布

weixin_30305735

最新推荐文章于 2022-11-30 15:15:14 发布

阅读量664

点赞数

原文链接：http://www.cnblogs.com/linfengtingyu1/p/3532709.html

版权

这两天读了《CSS权威指南第三版》的第6章，对vertical-align小节有些疑惑，在浏览器对text-top和text-bottom的处理上作者讲的不够清晰，例子也很片面。下面具体跟大家谈谈。

友情提示：下面的内容需要你先理解替换元素，非替换元素，css行模型（行高，行间距，内容区，行内框，行框）等相关概念，有欠缺的朋友请先到google充电。

vertical-align的其它取值这里就不讲了，想了解的可以参考下面链接的几篇文章，这里只讲text-top和text-bottom.

在讲到text-bottom时，作者原文是这样说的：

"vertical-align: text-bottom refers to the bottom of the text in the line. For the purposes of this value, replaced elements, or any other kinds of non-text elements, are ignored. Instead, a "default" text box is considered. This default box is derived from the font-size of the parent element. The bottom of the aligned element's inline box is then aligned with the bottom of the default text box. "

这段话中的"For the purposes of this value, replaced elements, or any other kinds of non-text elements, are ignored."我觉得作者表述得很模糊，究竟ignored是什么？是指在替换元素、非文本元素（replaced elements, or any other kinds of non-text elements）这些元素上应用vertical-align:text-bottom时这句关于vertical-align的声明会被忽略呢，还是指在计算text-bottom的位置时，这些元素对行框高度的影响会被忽略呢？？如果是前者，可我测试的demo却证明恰好相反；如果是后者，那么"For the purposes...is considered. "这句话在这里除了增加人的疑惑外没有任何作用。

根据我的测试，得出的结论是：text-bottom和text-top应用于<img>等行内替换元素时，在各浏览器中的表现一致；当应用于<span>等行内非替换元素时，在各浏览中的表现不尽相同。因此，作者上面那句话中ignored的意思应该是后者。
按照规范的定义，设置了vertical-align: text-bottom;的inline元素的inline box的底端将与父元素的文本行的底端对齐。其中父元素的文本行由父元素的font-size及父元素的基线决定，也就是说text-bottom和text-top的位置只与父元素的font-size及基线位置有关。看下面的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vertical-align：text-bottom</title>
        <style>
            p { width: 800px; margin: 20px auto; padding: 0;  font-size: 12px; background: pink; line-height: 68px;}
            p strong { font-size: 36px; background: skyblue; vertical-align: text-bottom;}
            p span {background: yellow;}
            p img{ vertical-align: text-bottom;}
        </style>

    </head>
    <body>        
        <p>
            <span>normal text</span> <strong>box</strong><img src="line.png" /><strong>box</strong>
        </p>
    </body>
</html>

在各浏览器的效果如下，其中黄色的文本是父元素的文本行：

1) IE7/8/9/10中：可以正确处理text-bottom和text-top,行内替换元素和行内非替换元素的效果一致.

2)Opera(18.0.1284.63),Safari(5.1.7),Chrome(29.0.1547.66 m),FireFox(26.0):

在这几个浏览器中，行内非替换元素（文字‘box’）的inline-box的文底端明显没有与父元素的文本行底端对齐，而替换元素的底端是对齐的。若是按照规范的定义，那么这些浏览器对<strong>标签的处理就是错误的，但让我奇怪的是：这么多浏览器居然以近乎完全相同的方式犯了同一个错误。这种情形让我觉得这些浏览器采用了相同的但不同于规范的机制，但至于它们为什么这么做，暂时不得而知，我曾经为了弄懂这个问题在查阅了很多大牛的文章（下面列出了其中的一些），但没有一篇文章中提到这个问题的，所有文章（包括《css权威指南》，这也是为什么我说作者的例子片面的原因）在讲到text-bottom和text-top时，举例都是用的图片，而对<span>等却只字不提，因此我才写了这篇文章来大家探讨。

虽然实际工作中，text-bottom与text-top并不常用，即使用了，与是对齐图片居多，但还是想弄明白这一点，与有哪位朋友明白的，请留言告知，万分感激！！

vertical-align的相关文章：

http://phrogz.net/css/vertical-align/index.html

http://www.impressivewebs.com/css-vertical-align/

http://css-tricks.com/what-is-vertical-align/

http://css-tricks.com/almanac/properties/v/vertical-align/

转载于:https://www.cnblogs.com/linfengtingyu1/p/3532709.html

weixin_30305735

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谈谈vertical-align的text-bottom和text-top

这两天读了《CSS权威指南第三版》的第6章，对vertical-align小节有些疑惑，在浏览器对text-top和text-bottom的处理上作者讲的不够清晰，例子也很片面。下面具体跟大家谈谈。友情提示：下面的内容需要你先理解替换元素，非替换元素，css行模型（行高，行间距，内容区，行内框，行框）等相关概念，有欠缺的朋友请先到google充电。vertical-align的其它取值这...
复制链接

扫一扫