材料设计图标垂直对齐，镀铬答案

【问题标题】：Material design icon vertical-align, chrome材料设计图标垂直对齐，镀铬
【发布时间】：2016-06-21 00:59:57
【问题描述】：

我们使用的是Material Design Icons，但是图标的垂直对齐方式很奇怪……因此我将图标的垂直对齐方式改为底部。

但是当文本和图标位于链接内时，图标的下划线属性绘制得低于 Chrome 中文本的下划线。在 Firefox 中，一切正常。

有没有更好的方法来正确定位材料设计图标？或者如何解决下划线画错位置的问题？

a {
  text-decoration: underline;
}

a:before {
  content: "\E315";
  font-family: 'Material Icons';
  vertical-align: bottom;
}

完整示例请参见此 jsfiddle： https://jsfiddle.net/uumn0bbt/3/

谢谢！斯蒂金

【问题讨论】：

标签： css google-chrome material-design vertical-alignment

【解决方案1】：

您可以使用border-bottom 在伪:after 元素中重建text-decoration: underline。

这是一个例子。

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


a {
  text-decoration: none;
  position: relative;
}

a:before {
  content: "\E315";
  font-family: 'Material Icons';
  vertical-align: bottom;
}

a:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 1px;
  border-width: 0 0 1px;
  border-style: solid;
}

&lt;a href="#"&gt;underline, icon v-align bottom&lt;/a&gt;

【讨论】：

【解决方案2】：

文本装饰将不起作用在 :pseudo 元素上，您可以试试这个代码（您可以在这里找到explanation）：

a:before {
    content: "\E315";
    font-family: 'Material Icons';
    margin-top: 5px;
    text-decoration: none !important;
    vertical-align: bottom;
}

所以让我粘贴那里的建议：

将文本包装在自己的 span 元素中，然后将 text-decoration 应用于该 span

使用内嵌块背景图像代替内嵌文本带有 :before 伪元素的图标字体

换句话说，您将需要添加额外的代码，同时您也可以尝试使用列表并将这些图标添加为列表样式图像，但这样您就不会使用字体根本没有，所以如果查看器正在缩放，结果可能会失真。

【讨论】：

【解决方案3】：

a.bottom:after { /* changed before to after */
  vertical-align: bottom;
}

这有助于解决您的问题吗？

【讨论】：