10690：在Firefox中报告了表格单元格中的响应式图像（最大宽度：100％）的错误。没有其他浏览器受到影响。参见

Question

在Firefox中（在Win7和Win8上测试），使用下面的代码 - 当响应式图像位于<fieldset>内时，它不再响应。这意味着当我的表单为手机调整大小时，图像不会相应缩小。

我可以轻松“解决”这个问题，所以我不需要任何帮助。但是，如果您知道解决此问题的方法，我们将不胜感激。

以下代码中的响应式图片不会响应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>

Answer 1

这看起来像a Bootstrap issue ...

目前，这是一种解决方法：将.col-xs-12添加到您的响应式图像中。

Bootply

Answer 2

您需要的只是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％宽度，如上述解决方案之一所述。

Answer 3

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

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

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

Answer 4

在我的情况下，我只希望图像在移动规模上表现得相应所以我创建了一个css样式.myimgrsfix只能在移动规模上启动

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

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

Answer 5

FF中的

使用内联样式，即

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

它摇滚：）

Answer 6

这似乎是一个浏览器错误。

10690：在Firefox中报告了表格单元格中的响应式图像（最大宽度：100％）的错误。没有其他浏览器受到影响。参见

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

Source

<{1}}中的{p> .img-responsive具有相同的行为。

Answer 7

只需将.col-xs-12添加到自适应图片即可。它应该工作。

Answer 8

根据以下内容更改img-class：

.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;

Answer 9

类似于阿卜杜勒给出的答案。

<fieldset>
   <legend>Image</legend>
   <img src="..." class="img-responsive" width="100%" />
</fieldset>

它在FF 29，Opera 12.17，Chromium 34和IE9中正常工作。是的，它是一组奇怪的浏览器！

Answer 10

我创建了这个脚本来解决类img-responsive bootstrap 3的问题，在我的情况下这解决了！

$(document).ready(function() {

    if ($.browser.msie) {

        var pic_real_width, pic_real_height;

        var images = $(".img-responsive");

        images.each(function(){

            var img = $(this);
            $("<img/>")
            .attr("src", $(img).attr("src"))
            .load(function() {
                pic_real_width = this.width;  

                pic_stretch_width = $(img).width();  

                if(pic_stretch_width > pic_real_width)
                {
                    $(img).width(pic_real_width);
                }
            });         
        });
    }

});

Answer 11

对于我的问题，我并不希望我的图像缩放到100％，因为它们并不像容器一样大。

对于我的xs容器（＆lt; 768px as .container），没有固定的宽度会导致问题，所以我把它放回去（减去15px col填充）。

// Helps bootstrap 3.0 keep images constrained to container width when width isn't set a fixed value (below 768px), while avoiding all images at 100% width.
// NOTE: proper function relies on there being no inline styling on the element being given a defined width ( '.container'  )

function setWidth() {
    width_val = $( window ).width();
    if( width_val < 768 ) {
        $( '.container' ).width( width_val - 30 );
    } else {
        $( '.container' ).removeAttr( 'style' );
    }
}

setWidth();
$( window ).resize( setWidth );

Answer 12

在自定义css文件中仅添加条件firefox。

/* only Firefox */
@-moz-document url-prefix() {
   .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
      width: 100%;
   }
}

Bootstrap 3 .img响应图像在FireFox中的fieldset内部没有响应

12 个答案:

10690：在Firefox中报告了表格单元格中的响应式图像（最大宽度：100％）的错误。没有其他浏览器受到影响。参见