Firefox图片元素父级宽度太大

Question

响应式图片元素的父元素在Firefox（OS-X）中无法获得正确的宽度。

此错误是否有解决方法？

＆＃13;

＆＃13;

.picture-wrapper {
  float: left;
}

.next-element {
  float: left;
}

＆＃13;

<div class="picture-wrapper">
<picture>
   <source media="(min-width: 1000px)"
      srcset="
        //placehold.it/1200x600 1200w"
      sizes="800px" />
   <img class="image mix-image_buffer"   
      sizes="
        (min-width: 400px) 100vw,
        calc(100vw - 50px)"
      srcset="
        //placehold.it/200x200 200w,
        //placehold.it/250x250 250w,
        //placehold.it/300x300 300w,
        //placehold.it/480x480 480w,
        //placehold.it/600x600 600w,
        //placehold.it/960x960 960w"
     src="//placehold.it/200x200" />
</picture>
</div>
<div class="next-element">Caption</div>

＆＃13;

＆＃13;

＆＃13;

Codepen：http://codepen.io/anon/pen/GZVeYw

结果：

火狐

图片元素和下一个元素之间的空白区域

Chrome / IE

按预期工作（无空格）

Answer 1

bug实际上是针对任何祖先发生的，而不只是<picture>。

如果宽度已知，则可以通过css设置宽度来解决错误。

<img class="image mix-image_buffer"   
  sizes="
    (min-width: 400px) 100vw,
    calc(100vw - 50px)"
  srcset="
    //placehold.it/200x200 200w,
    //placehold.it/250x250 250w,
    //placehold.it/300x300 300w,
    //placehold.it/480x480 480w,
    //placehold.it/600x600 600w,
    //placehold.it/960x960 960w"
  src="//placehold.it/200x200"
  style="width: 600px" />