Material 设计图标垂直对齐，chrome

Question

我们正在使用 Material 设计图标，但是图标的垂直对齐方式很奇怪...因此我将图标的垂直对齐方式更改为底部。

但是当文本和图标在 link 内时，图标的下划线属性绘制得比 Chrome 中文本的下划线低。在 Firefox 中，一切都按预期工作。

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

a {
  text-decoration: underline;
}

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

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

谢谢！斯蒂恩

Answer 1

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

这对解决您的问题有帮助吗？

Answer 2

文本装饰将无法在 :pseudo 元素上工作，如果您尝试此代码（您可以在此处找到 explanation），您会看到：

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

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

Wrap the text in its own span element, then apply text-decoration to that span

Use an inline block background image instead of inline text in an icon font with your :before pseudo-element

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

Answer 3

您可以使用 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;
}

<a href="#">underline, icon v-align bottom</a>

Material 设计图标垂直对齐，chrome

Material design icon vertical-align, chrome

css

google-chrome

vertical-alignment

material-design