html - Firefox 图片元素父级宽度太大

Question

响应式图片元素的父元素在 Firefox (OS-X) 中没有获得正确的宽度。

这个错误有什么解决方法吗？

.picture-wrapper {
  float: left;
}

.next-element {
  float: left;
}

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

代码笔: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" />