Html 与“有麻烦”；“底部填充法”；

你可以看到我上传的示例站点（它是底部“下一步”按钮下面的3个按钮）

我尝试使用底部填充方法来保持div的高宽比（使用底部填充作为宽度的百分比来创建div的整个高度，其中div设置为绝对定位，宽度和高度为100%）。但是，在某些浏览器中（如我的三星galaxy 3和dreamweaver cs6 live view），div内部的图像与外部div的高度相同，并带有底部填充（即0px），因此它实际上消失了。当我将height属性全部去掉时，图像会尝试采用全尺寸，使其过大

以下是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>

---

我无法在mac上复制DreamWeaver CC中的问题。我也不能在Chrome、FF、Opera和Safari中复制它。它甚至在良好的ol（祝福它的心）中看起来是正确的，我有时使用它进行测试，因为它倾向于使事情更接近旧版本的IE。所有这些当然都在mac上。奇怪！我希望我能确定是否只有Galaxy 3和DW cs6有问题！

#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;
}