遇到“底部填充方法”的问题

Question

您可以看到我的示例网站已上传HERE.（它是底部NEXT按钮下方的3个按钮）

我正在尝试使用底部填充方法来保持div的高度/宽度比（使用底部填充作为宽度的百分比来创建div的整个高度，其中div设置为绝对定位和100 ％宽度和高度。）。但是，在某些浏览器中（如我的三星galaxy 3和Dreamweaver cs6实时视图），div内部的图像采用底部填充（为0px）的外部div的高度，因此它实际上消失了。当我完全取出高度属性时，图像会尝试使用全尺寸，使它们太大。

这是HTML：

<div ID="add_learn_wrapper"><div ID="add_learn_container"><div ID="add_learn_stretch"><div ID="add_learn">
<div class="add_learn_buttons">
<a href=#><img src="images/add-button-up.png" class="button"></a></div>
<div class="add_learn_buttons"><a href=#><img src="images/learn_more_button.png" class="button"></a></div>
<div class="add_learn_buttons"><a href=#><img src="images/report-button.png" class="button"></a>
</div></div></div></div></div>

这是CSS：

#add_learn_wrapper {
    width: 75%;
    margin-top: 5px;
    height: auto;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 499px) {
#add_learn_wrapper {
    width: 95%;
}   
}
#add_learn_container {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    max-width: 480px;
    min-width: 320px;
    height: auto;
    overflow: hidden;
}
@media screen and (max-width: 499px) {
#add_learn_container {
    width: 100%;
    max-width: 300px;
    min-width: 10px;
}   
}
#add_learn_stretch {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 0px;
    padding-bottom: 54%;
    position: relative;
}
#add_learn {
    display: block;
    Position: absolute;
    width: 100%;
    height: 100%;
    text-align: left;
}
#add_learn2 {
    display: block;
    Position: relative
    width: 100%;
    height: 100%;
    text-align: left;
}

.add_learn_buttons {

    height: 32%;
    width: 100%;

}
.add_learn_buttons img {
    height: 100%;
    width: auto;
}