在Safari中使用内联块的嵌套DIV会导致父级的兄弟元素未对齐

Question

我正在尝试使用CSS DIV对齐由display: inline-block元素组成的一组“按钮”，这些元素按照网页底部排列。我附上了fiddle，说明了这个问题。

问题是这个当前代码适用于所有现代浏览器，除了 Safari（7,8）。我不知道这是Safari使用的WebKit中的错误，还是我不允许使用正确的咒语而允许发生的错误。

触发不需要的行为的是嵌套的DIV.btn-sub;但是，删除该文本不是“修复”问题的选项。

这是预期的行为（从Firefox 34获取，在IE 9,10和最新Chrome上的类似行为）：

以下是Safari上发生的事情：

任何帮助都将不胜感激！

Answer 1

通常最佳做法是在行/列表中创建内联阻止元素时使用列表，例如导航。

这里的问题似乎是直接用填充设置的块;相对于它的父母。以某种方式将其转变为边际或类似的东西。

你可以尝试剥离CSS，直到你从块中获得一个完整的高度，然后添加另一个内部div，你可以调用.btn-padding包含你的顶部填充。

这是类似的。

body, html {
    height: 100%;
    margin: 0;
    background: green;
}
#wrap {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0px;
    height: 50px;
    border:0;
    background-color: blue;
    color: #fff;
}

#btnls {
    display: block;
    list-style-type: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#btnls li {
    display: inline-block;
    margin-right: 10px;
    background-color: purple;
    min-width: 158px;
    max-width: 300px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#btnls li .btn-padding {
    display: block;
    padding-top: 10px;
    width: 100%;
    height: 50px;
}

#btnls li .btn-padding .sub-btn {
    display: block;
    font-size: x-small;   
    margin: 0;
    padding: 0
}

<div id="wrap">
    <ul id="btnls">
        <li>
            <div class="btn-padding">Foo
                <div class="sub-btn">Bar</div>
            </div>
        </li>
        <li>
            <div class="btn-padding">Foo</div>
        </li>
        <li>
            <div class="btn-padding">Foo</div>
        </li>
    </ul>
</div>