相对于父级对齐 HTML 特殊字符按钮答案

【问题标题】：Aligning HTML special charaters bottom relative to parent相对于父级对齐 HTML 特殊字符按钮
【发布时间】：2014-12-05 10:36:33
【问题描述】：

所以我在 WordPress 中为客户建立一个网站，设计在几个标题上有 square 句号，但他们使用的字体有 round 句号.

我已经用短代码“[stop]”解决了这个问题，这将返回以下代码：

<span class="square-stop">&#9632;</span>

这是一个 HTML 方形符号 ■ 包裹在 span 中以进行样式设置。

但我似乎可以让它底部与文本对齐。在此处查看示例：http://jsfiddle.net/9a8x844n/

<h1>This is a heading of some kind<span class="square-stop">&#9632;</span></h1>

【问题讨论】：

在 Chrome 中看起来不错。你在哪个浏览器上遇到这个问题？
Chrome - prntscr.com/4ura7b
这些都在 chrome on mac JSFiddle prntscr.com/4urck3 Devsite prntscr.com/4urcqw
也显示相关的 CSS 代码并指定字符应该出现的位置。除非您正在做一些特殊的事情，否则它的字形位于文本基线上，但不同的字体具有不同的字符字形，可能在可见字形下方有空白。

【解决方案1】：

使用以下 css 对齐 square：

h1{
     position:relative;   
}
.square-stop {
    font-size: 0.7em;
    position: absolute;
    bottom: 0;

}

【讨论】：

【解决方案2】：

使用垂直对齐：底部；

.square-stop {
    font-size: 0.7em;
    vertical-align: bottom;
}

【讨论】：

【解决方案3】：

我在 Chrome 中使用导致此问题的字体 Myriad Pro，我已修复此问题，但将 .square-stop 字体设置为 Arial。

你可以在这里查看我的修复：http://jsfiddle.net/9a8x844n/3/

.square-stop {font-size: 0.7em; font-family: Arial;}

【讨论】：