痴迷:与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看起来有点奇怪，但我总是遇到材料图标的垂直对齐问题，特别是当伴随着没有基线的中文字符时，我尝试了许多不同的line-height，font-size，vertical-align，font-family在div和i.material-icons上的组合，并认为上面所示的组合是最好的。

我对这个问题非常着迷，并投入了大量的努力试图解决它。直到后来我才发现这只发生在我的Nexus6上，而在iPhones和其他安卓手机上就没有这个问题。即使在我的Nexus 6上，如果我使用其他浏览器，而不是Chrome，也没有问题；即使使用Chrome，横屏也没有问题，只在Nexus 6上的chrome的纵向视图上进行配置。我到目前为止只测试过，但对于一些移动设备在一些特殊环境下，这仍然可能是一个潜在的问题，所以仍然不是一个我可以简单忽略的问题。这就是我可以使用这个社区的一些知识和经验的地方-什么可能导致这种行为差异？

Answer 1

垂直对齐MDI (MaterialDesignIcons)

材质图标的问题不应该通过高度、行高、填充等之间的奇怪组合来解决；探索新的属性。

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

如果上述代码不起作用，请尝试不同的display properties。

值得一试的

我首先想到的是你使用rem，“老的”浏览器不支持它(can I use)。它在景观中工作仍然很奇怪，但尝试在safe unit中定义所有度量。

Another (problem)

如果你想支持更老的浏览器，你不应该用英文编写图标，IE9及以下版本不支持它。

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

如果您点击icons并选择"<>图标字体“，您将能够复制较旧浏览器的html。

如果上面的信息对你没有帮助，请修复链接(并告诉我)，我将检查是否可以重新创建问题。