CSS 宽度：100% 在谷歌浏览器中不起作用

Question

我正在尝试基于figure 和figcaptions 使用captions 构建画廊部分。 它必须是响应式的并且可以使用不同的height/width along with itsfigcaption`。

在firefox 中一切正常，但不幸的是chrome 没有遵循CSS 中的 100% width，这很重要。

figure {
  margin: 6px;
  color: #333;
  /*display: table;
  float: left;*/
  display: inline-block;
  -webkit-box-sizing: border-box ;
  -moz-box-sizing: border-box ;
   box-sizing: border-box ;

}
figure figcaption {
  background: #E3E3E3;
  padding: 10px 12px 12px;
  color: #333;
  text-align: center;
  font-size: 13px;
  width: 100%;
  display: table-caption;
  caption-side: bottom;
  -webkit-box-sizing: border-box ;
  -moz-box-sizing: border-box ;
  box-sizing: border-box ;
}

这是我的JSFiddle

请帮忙。

Answer 1

将display:inline-table 用于figure，并从figcaption 中删除width:100%。

这是一个在 Chrome 和 Firefox 中工作的FIDDLE。

figure {
    margin: 6px;
    color: #333;
    display: inline-table;  /*changed to inline-table*/
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
     box-sizing: border-box ;
}

figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
    font-size: 13px;
    /*  width:100%;   */
    display: table-caption;
    caption-side: bottom;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
}

Answer 2

将宽度：100% 更改为宽度：300px；两者都会支持。

Answer 3

请看下面的小提琴： http://jsfiddle.net/tm4tjp4c/13/ 适用于 chrome 和 Mozilla

我在图中添加了display:table，并从图标题中删除了width:100%

figure {
    margin: 6px;
    color: #333;
    /*display: table;
    float: left;*/
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
    display:table;
 }
figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
    font-size: 13px;
    display: table-caption;
    caption-side: bottom;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
}

Answer 4

此解决方案可能效果很好，除非您必须插入 <div></div> 并具有某种固定宽度或最大宽度。

figure {
	margin: 6px;
    max-width: 300px;
	color: #333;
	display: inline-block;
	-webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;

}
figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
	font-size: 13px;
	width: 100%;
	display: table-caption;
	caption-side: bottom;
	-webkit-box-sizing: border-box ;
	-moz-box-sizing: border-box ;
	box-sizing: border-box ;
}
figure div{
    display:flex;
    flex-direction: column;
}

<figure>
    <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
<figure>
    <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmofgdgdfgdfgfdgd tempor incididunt ut labore et dolore maasdsa dsa ds ad sad as dsa dsa dsa ds das d asd sa da  gna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
    <figure>
        <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
        <figure>
            <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim as das dasd a re efsfsdghfsd fhsd fsdf hds fhds fhsd fhsd fhsdk fhsd fhdskj fhsdk fhsdkfh hsdf kdshfsdh fshdsfh ksdhf sdfdd minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
<figure>
    <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmofgdgdfgdfgfdgd tempor incididunt ut labore et dolore maasdsa dsa ds ad sad as dsa dsa dsa ds das d asd sa da  gna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
    <figure>
        <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>

Answer 5

将每个图形元素放入图形框元素中。 将 figurebox.display 设置为 inline-block （和 valign top） 将 figure.display 设置为浮动左表。 （在您发表评论后）

figurebox {
  display: inline-block;
  vertical-align: top;
}

figure {
  display: table;
  float: left;
}

<figurebox>
  <figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex asl;lf kasdfkla ;lsl sf;la dsfhasfqw qw eiiwyq uoqw ruiq qeiwory qwoeroqewr uiqw ryqwerqew rqew rqwe rqewr qwer qwe qew r qwer qwe rqwer qwer 
    </figcaption>
  </figure>
</figurebox>

查看更新示例http://jsfiddle.net/t28gjzpv/1/