html - 如何从 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 的"new"版本。您可以在 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>