CSS Width:100% 在 Google Chrome 中不工作

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

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

Answer 2

请看下面fiddle： 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 3

此解决方案可能效果很好，除非您必须插入 <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 4

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

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/

Answer 5

将 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 ;
}

CSS Width:100% 在 Google Chrome 中不工作

CSS Width:100% not working in Google Chrome

html

css

google-chrome

width

figure