CSS垂直对齐底部在iphone上不起作用

我的源代码是链接：PC上显示的演示正是我想要的，但问题是，当我在iphone（和一些android手机）上显示相同的代码时，是不正确的

HTML:

---

如您所见，我想要的是第1行的文本与底部对齐，这与链接的演示一样好。但当我在iphone中显示它时，行1的文本与中间对齐，这不是我想要的

它似乎在您的CSS中

你告诉它垂直对齐：中间

试试这个：

.row1:before, .row2:after {
    content:'';
    height:100%;
    display:inline-block;
}

---

尝试添加！重要提示：垂直对齐：底部！重要的；。希望有帮助。

vertical align

不应该影响块级元素（如.row1），但当前桌面Chrome似乎有一个bug。iPhone中的行为是正确的。

.divinline {
    display:inline-block;
}
.container {
     color:#FFF;
    height:60px;
    background:#ffee12;
    width:50%;
    text-align:left;
}
.row1 {
    background:#450011;
    font-size:12px;
    height:60%;
    vertical-align:bottom;
    overflow:hidden;
}
.row2 {
    background:#333333;
    font-size:12px;
    height:40%;

}
.row1:before, .row2:after {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

.row1:before, .row2:after {
    content:'';
    height:100%;
    display:inline-block;
}