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

概述响应式图片元素的父元素在Firefox(OS-X)中无法获得正确的宽度. 这个bug有没有解决方法？ .picture-wrapper { float: left;}.next-element { float: left;} <div class="picture-wrapper"><picture> <source media="(min-width: 1000px)" 响应式图片元素的父元素在firefox(OS-X)中无法获得正确的宽度.

这个BUG有没有解决方法？

.picture-wrapper {  float: left;}.next-element {  float: left;}

<div ><picture>   <source media="(min-wIDth: 1000px)"      srcset="        //placehold.it/1200x600 1200w"      sizes="800px" />   <img          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 >Caption</div>

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

结果：

火狐

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

Chrome / IE浏览器

按预期工作(没有空格)

解决方法 bug实际上是针对任何祖先发生的,而不仅仅是< picture>.

如果宽度已知,则可以通过CSS设置宽度来解决错误.

<img      sizes="    (min-wIDth: 400px) 100vw,calc(100vw - 50px)"  srcset="    //placehold.it/200x200 200w,//placehold.it/960x960 960w"  src="//placehold.it/200x200"   />

总结

以上是内存溢出为你收集整理的html – Firefox图片元素父级宽度太大全部内容，希望文章能够帮你解决html – Firefox图片元素父级宽度太大所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。