在 FireFox，Bootstrap 3 .img-responsive 图像在场集内不响应

问题描述

在 Firefox(在 Win7 和 Win8 上测试)，下面的代码 – 当响应图像在<fieldset> 内部时，它不再响应。这意味着当我的表单调整大小为手机，图像不会相应缩小。

我可以方便”work-around” 的问题，所以我不需要任何帮助。但是，如果你知道一种方法来解决这个问题，那将是非常感激的。

以下代码中的响应图像将无法响应 FireFox 中的浏览器大小 (至少在 Win7 和 Win8 上)，除非您删除<fieldset> 和<legend> 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fieldset Responsive Image Test</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
<div id='content' class='container'>
    <div class='row'>
        <div class='col-xs-10 col-xs-offset-1'>
            <form>
                <fieldset>
                    <legend>I Am Legend</legend>
                        <img class='img-responsive' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" />
                </fieldset>
            </form>
        </div>
    </div>
</div>
</body>
</html>

最佳解决方案

这看起来像 a Bootstrap issue …

目前，这里有一个解决方法：将.col-xs-12 添加到响应式图像中。

Bootply

次佳解决方案

所有你需要的是 width:100% 适用于标签的地方，如这里的各种答案所示。

使用 col-xs-12：

<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />

或内联 CSS：

<img class='img-responsive' style='width:100%;' />

或者，在您自己的 CSS 文件中，为.img-responsive 添加一个额外的定义

.img-responsive {
    width:100%;
}

问题的根源

这是一个已知的 FF 错误，<fieldset> 不遵守溢出规则：

https://bugzilla.mozilla.org/show_bug.cgi?id=261037

修复 FireFox 错误的 CSS “FIX” 将是<fieldset> display:table-column 。但是，按照以下链接，会导致在 Opera 中显示字段集失败：

https://github.com/TryGhost/Ghost/issues/789

因此，只需将您的标签设置为 100％的宽度，如上述解决方案之一所述。

第三种解决方案

将 bootstrap.css 中的.img-responsive 更改为以下内容：

.img-responsive {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

由于某些原因，添加宽度：100％的混合使 img-responsive 工作。

第四种方案

在 FF 中使用内联样式，即

<img src="..." class="img-responsive" style="width:100%; height:auto;" />

它摇滚:)

第五种方案

在我的情况下，我只希望这个图像在移动规模上的响应性能，所以我创建了一个 CSS 样式.myimgrsfix，只能在移动规模

.myimgrsfix {
    @media(max-width:767px){
        width:100%;
    }
}

并应用于图像<img class='img-responsive myimgrsfix' src='whatever.gif'>

参考文献

Bootstrap 3 .img-responsive images are not responsive inside fieldset in FireFox

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

在 FireFox，Bootstrap 3 .img-responsive 图像在场集内不响应