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

在Firefox(Win7和Win8testing版)中,使用下面的代码 – 当响应图像位于<fieldset>内时,它不再响应。 这意味着,随着我的表单调整为手机,图像不会相应缩小。

我可以很容易地“解决”这个问题,所以我不需要任何帮助。 但是,如果你知道一个方法来解决这个问题,将不胜感激。

除非您删除<fieldset><legend>否则下面代码中的响应图像将不会响应FireFox中的浏览器大小(至less在Win7和Win8上)。

 <!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> 

这看起来像一个引导问题 …

目前,这是一个解决方法:将.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

所以,如上面的解决scheme之一所述,将标签设置为100%的宽度。

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

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

出于某种原因,添加宽度:100%的混合使img响应的工作。

在FF中使用内联样式即

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

它岩石:)

在我的情况下,我只希望图像在移动规模作出反应,所以我创build了一个css样式.myimgrsfix,只有在移动规模

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

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

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

10690:在表格单元格中报告了Firefox中的响应式图像(最大宽度为100%)中的错误。 没有其他浏览器受到影响。 看到

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

资源

<fieldset>中的.img-responsive具有相同的行为。

将img-class更改为:

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

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

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

它在FF 29,Opera 12.17,Chromium 34和IE9中正常运行。 是的,这是一个奇怪的浏览器!

我创build了这个脚本来解决类img-responsive bootstrap3的问题,在我的情况下,这个问题解决了!

 $(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); } }); }); } }); 

只需将.col-xs-12添加到您的响应式图像即可。 它应该工作。

对于我的问题,当他们不打算像容器一样大时,我不希望我的图像缩放到100%。

对于我的xs容器(小于768px为.container),没有一个固定的宽度驱动问题,所以我把它放回去(less了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 ); 

在自定义的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%; } }