html - 如何从 Firefox 上的按钮内的渐变中删除奇怪的底部填充？

Question

这个让我难住了。我在按钮内有一个图像和一个渐变，在 Chrome 上，所有填充/边距都按预期工作，但在 Firefox 上，渐变下方似乎有额外的填充，我无法隔离它可能是什么。它似乎与渐变有关，因为当我使用 display:inline-block 时，“填充”消失了，但渐变也是如此。

我怎样才能将渐变保持在需要的位置，同时移除幻影“填充”？

我愿意改变 HTML 结构，但这必须也适用于 IE9。

Chrome :

火狐:

HTML:

<button id="sunny-days" data-filter-value="Sunny Days" class="subjects">
    <img src="../assets/images/filters/subjects/sunny-days.png">
    <div class="inner-gradient"></div>
    <span class="imageFilterLabel">Sunny Days</span>
</button>

CSS(SASS):

button {
            max-width: 169px;
            height: 212px;
            padding: 0px;
            margin: 12px;
            border: none;
            img {
                position: relative;
                display: inline-block;
                top: 0px;
                left: 0px;
                max-width: 169px;
                height: 212px;
                margin: 0px;
                padding: 0px;
            }
            .inner-gradient {
                height: 50%;
                position: relative;
                display: block;
                top: -110px;
                background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
                background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
            }
            .imageFilterLabel {
                position: relative;
                display: block;
                z-index: 100;
                top: -152px;
                width: 100%;
                color: $white; 
                @include font-size(14,14);
                @include font-weight(medium);
            }
        }

Answer 1

好的，在你发表评论后我想通了你的问题:

给你的 button 一个 position:relative 和 z-index:-1 加上一些调整就可以了:

button {
  border: none;
  height: 212px;
  margin: 12px;
  max-width: 169px;
  padding: 0;
  position: relative;
  z-index: -1;
}
img {} /* this can be empty */

.inner-gradient {
  height: 50%;
  position: relative;
  display: block;
  top: -108px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  /* FF3.6-15 */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=0);
  /* IE6-9 */
}
.imageFilterLabel {
  position: absolute;
  display: block;
  z-index: 100;
  bottom: 20px;
  width: 100%;
  color: white;
  font-size:14px;
  font-weight:400;
}

<button id="sunny-days" data-filter-value="Sunny Days" class="subjects">
  <img src="//lorempixel.com/169/212">
  <div class="inner-gradient"></div>
  <span class="imageFilterLabel">Sunny Days</span>
</button>

<hr />

<button id="sunny-days" data-filter-value="Sunny Days" class="subjects">
  <img src="//lorempixel.com/169/212">
  <div class="inner-gradient"></div>
  <span class="imageFilterLabel">Sunny Days</span>
</button>