如何从Firefox中删除图像中的额外空间？

Question

我在firefox中获得了额外的空间，对于chrome和safari来说它完美无缺。图像下方的额外空间。当我调整firefox浏览器的大小时，它将显示额外的空间。我如何摆脱额外的空间？我正在测试“box-ordinal-group”，先让我的图像显示，然后再显示内容。

我的代码是：

 img {
   width: 100%;
}
.music-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}

.poster-content {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

.poster-wrap {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
}

<section class="row-wrap">
    	<div class="row-inner music-wrapper">
    		<div class="poster-wrap">
    			<img class="poster" src="http://dummyimage.com/420x420/000/fff"> 
    		</div>
    		<div class="poster-content">
    			<h1>Sunday</h1>
    			<p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
    			<a class="btn-wrap" target="_blank" href="#">
    				<div class="btn">listen now</div>
    			</a>
    		</div>
    	</div>
    </section>
    
    <section class="row-wrap">
    	<div class="row-inner music-wrapper">
    
    		<div class="poster-content">
    			<h1>Sunday</h1>
    			<p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
    			<a class="btn-wrap" target="_blank" href="#">
    				<div class="btn">listen now</div>
    			</a>
    		</div>
    		<div class="poster-wrap">
    			<img class="poster" src="http://dummyimage.com/420x420/000/fff"> 
    		</div>	
    	</div>
    </section>

Answer 1

也许您应该使用css flex，它是您正在使用的box的“新”版本。您可以在Css tricks和W3Schools

了解详情

img {

  width: 100%;

}

.music-wrapper {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  flex-direction: column;

}

.poster-content {} .poster-wrap {}

<section class="row-wrap">
  <div class="row-inner music-wrapper">
    <div class="poster-wrap">
      <img class="poster" src="http://dummyimage.com/420x420/000/fff">
    </div>
    <div class="poster-content">
      <h1>Sunday 1</h1>
      <p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
      <a class="btn-wrap" target="_blank" href="#">
        <div class="btn">listen now</div>
      </a>
    </div>
  </div>
</section>

<section class="row-wrap">
  <div class="row-inner music-wrapper">

    <div class="poster-content">
      <h1>Sunday 2</h1>
      <p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
      <a class="btn-wrap" target="_blank" href="#">
        <div class="btn">listen now</div>
      </a>
    </div>
    <div class="poster-wrap">
      <img class="poster" src="http://dummyimage.com/420x420/000/fff">
    </div>
  </div>
</section>