在 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 圖像在場集內不響應