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

【问题标题】：How to remove odd bottom padding from gradient inside a button on firefox?如何从Firefox上的按钮内的渐变中删除奇怪的底部填充？
【发布时间】：2016-04-19 22:49:06
【问题描述】：

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

如何将渐变保持在需要的位置但删除幻像“填充”？

我愿意更改 HTML 结构，但这也必须在 IE9 中工作。

铬：

火狐：

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

【问题讨论】：

工作正常here，使用FF
你用的是什么版本的FF？我在 43 和 45 遇到了问题。
使用FF45.0.2，我不会在任何地方看到底部的黑色背景
不，这不是黑色背景。这是我包含的下一张图片以供参考（在两张图片中）。这是问题之间的空白。

标签： html css firefox

【解决方案1】：

好的，在您的 cmets 之后，我发现了您的问题：

给你的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>

【讨论】：