CSS宽度：100％在Google Chrome中无法使用 [英] CSS Width:100% not working in Google Chrome

问题描述

我试图根据图和建立字幕 figcaptions 。
它必须具有响应性，并使用不同的 height / width以及 figcaption。 >

在 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

请帮助。

解决方案

对图使用 display：inline-table

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

  figure {
 margin：6px; 
 color：＃333; 
 display：inline-table; / *改为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; 
} 
  

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.

解决方案

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

这篇关于CSS宽度：100％在Google Chrome中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！