问题
I'm trying to build gallery-section with captions based on figure and figcaptions.
It must be responsive and work with different height/width along with itsfigcaption`.
Everything works well in firefox, but unfortunately chrome doesn't follow the 100% width in CSS which is significant.
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 ;
}
Here's my JSFiddle
Please help.
回答1:
Use display:inline-table for figure and remove width:100% from figcaption.
Here's a FIDDLE working in both Chrome and Firefox.
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 ;
}
回答2:
Change width: 100% to width: 300px; it will support both.
回答3:
Please see below fiddle: http://jsfiddle.net/tm4tjp4c/13/ works in both chrome and Mozilla
I have added display:table to figure and removed width:100% from figure caption
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 ;
}
回答4:
This solution might work well, except you have to insert <div></div> and have some kind of fixed width or max-width.
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>回答5:
Put each figure-element into figurebox-element. Set figurebox.display to inline-block (and valign top) Set figure.display to floating-left table. (After Your comment)
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>
see updated example http://jsfiddle.net/t28gjzpv/1/
来源：https://stackoverflow.com/questions/32196141/css-width100-not-working-in-google-chrome