痴迷：在Nexus 6上使用Chrome进行垂直对齐

Question

有问题的链接：http://goo.gl/w5Vxu7

如果您在台式计算机上打开此链接，则垂直对齐很好。

然而，在我的手机上，它不是：

此屏幕截图取自chrome：//使用连接的Nexus 6进行检查，它与我手机上的外观完全相同。你可以看到第一行显然已经处理好了。

小图标是素材图标，相关的HTML和CSS是：

<div><i class="material-icons">today</i>2012-12-25</div>
<style>
html{font-size:15px;font-family:Microsoft Yahei}
div{font-size:1rem;line-height:1.5}
i.material-icons{line-height:1.4;vertical-align:bottom;font-size:inherit !important}

关于那个vertical-align:bottom，使用vertical-align:middle看起来有点奇怪，但我总是遇到与素材图标垂直对齐的问题，特别是在配上汉字的情况下， ; t有基线，我已经针对line-height和{{font-size，vertical-align，font-family，div尝试了多种不同的组合1}}并确定如上所示的这种组合是最好的。

我对这个问题非常着迷，并为解决这个问题付出了很多努力。直到后来我发现这只发生在我的Nexus 6上。在iPhone和其他Android手机上没有这样的问题。即使在我的Nexus 6上，如果我使用其他浏览器而不是Chrome，也没有问题;即使使用Chrome，横向视图也没有问题，处理只发生在Nexus 6上的chrome的纵向视图上。我到目前为止只进行了测试，但在某些特殊环境中这仍然可能成为某些移动设备的潜在问题，所以它仍然不是我可以忽略的问题。这就是我可以利用这些社区的一些知识和经验 - 可能导致这种行为差异的原因？

Answer 1

垂直对齐MDI（MaterialDesignIcons）

提供的链接当前返回白色屏幕，因此我无法测试您的CSS。

材料图标的问题不应该通过高度，线高，填充等之间的奇怪组合来解决;探索新的属性。在我的例子中，以下CSS解决了这个问题。

.material-icons{
    display: inline-flex;
    vertical-align: baseline; /* or middle? */
}

如果上述代码不起作用，请尝试使用其他display properties。

值得一试

我的第一个想法是你使用rem，“旧的”浏览器不支持它（can I use）。它仍然很奇怪，它在横向上工作，但尝试在safe unit中定义所有测量。

另一个（问题）

如果您想支持旧版浏览器，则不应使用英文编写图标，IE9及以下版本不支持。请改用替代解决方案（例如下面的例子）。

<i class="material-icons">today</i> /* do not use */
<i class="material-icons">&#xE8DF;</i> /* do use */

如果您点击icons并选择“＆lt;＆gt;图标字体”，您就可以复制旧浏览器的html。

如果上述信息对您没有帮助，请修复链接（并告诉我），我会检查是否可以重新创建问题。