1

我正在使用 Bootstrap 框架，我有一个父 div 包含一个带有 a 的图像position:relative，一个子 div 包含一个带有 a 的图像position:absolute。我使用 left 和 top 百分比将子 div 推到父 div 的右下角。

在 Chrome 和 Safari 中，子 div 的定位一切正常，当浏览器重新调整大小时，图像会相应地响应和缩放。但是在 Firefox 和 Internet Explorer 中，子 div 中的图像无法重新调整大小。似乎position:absolute破坏了 Boostrap 的图像大小调整功能。

有谁知道处理此问题的正确方法或解决方法？

现场示例：http ://www.smartbombinteractive.com/testbed/bootstrap_resize/

HTML：

<div> class="header-image"><img src="img/img_test_bg.jpg">
        <div class="corner-peal"><img src="img/header_corner_peal.png">
        </div>
</div>

CSS：

.header-image{
    text-align:center;
    position:relative;
}
.corner-peal{
    position:absolute;
    left:50.99%;
    top: 17.295%;
}
4

1 回答 1

0

我真是个菜鸟！Bootstrap 根据其容器的宽度缩放图像。解决方案是在子节点上设置百分比宽度（Chrome 和 Safari 会为您执行此操作，而 Fire Fox 和 IE 则不会。）

.corner-peal{
    position:absolute;
    left:50.99%;
    top: 17.295%;
    width:49.01%;
}
于 2013-03-25T21:37:20.867 回答