Obsession: Vertical Alignment with Chrome on Nexus 6 - css

Question

Link in question: http://goo.gl/w5Vxu7
If you open this link on desktop computer, the vertical aligns are good.
However, on my cellphone, it is not:
This screenshot is taken from chrome://inspect with my Nexus 6 connected, it is exactly same with the appearance on my phone. You can see the first line is obviously dispositioned.
The small icons are Material Icons, related HTML and CSS are:
<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}
About that vertical-align:bottom, it looks a little weird not using vertical-align:middle, but I've always had vertical align issues with material icons, especially when accompanied with Chinese characters, which don't have baselines, and I've tried numerous different combinations of line-height,font-size,vertical-align,font-family for both the div and i.material-icons and decided this combination as shown above is the best.
I am quite obsessed with this issue and poured in lots of efforts trying to solve it. Until later I found out this only happens on my Nexus 6. On iPhones and other android phones there is no such problem. Even on my Nexus 6, if I use other browser instead of Chrome, there will be no problem; and even with Chrome, landscape view has no problem, the disposition only happens on portrait view of chrome on Nexus 6. I have only tested so far, but this still could be a potential problem for some mobile devices in some special environment, so it is still not an issue I can simply ignore. And this is where I can use some of this community's knowledge and experience - what could possibly be causing this behavioral discrepancy?

Answer 1

Vertical align MDI (MaterialDesignIcons)
The provided link currently returns a white screen, so I can't test your CSS.
The problem with the material-icons shouldn't be solved with a strange combination between height, line-height, padding and so on; explore new attributes. In my case, the following CSS solved the problem.
.material-icons{
display: inline-flex;
vertical-align: baseline; /* or middle? */
}
If the code above doesn't work, try different display properties.
Worth a try
My first thought was your use of rem, "older" browsers doesn't support it (can I use). It is still strange that it works in landscape, but try to define all measurements in a safe unit.
Another (problem)
If you want to support older browsers, you shouldn't write the icons in English, IE9 and below won't support it. Use the alternative solution instead (example below).
<i class="material-icons">today</i> /* do not use */
<i class="material-icons"></i> /* do use */
If you click on the icons and select "<> Icon font", you will be able to copy the html for older browsers.
If the information above don't help you, please fix the link (and tell me) and I will check if I can recreate the problem.