How to remove odd bottom padding from gradient inside a button on firefox?
<p>This one has me stumped. I've got an image and a gradient living inside a button and on Chrome all the padding/margin works as expected, but on Firefox there appears to be extra padding below the gradient and I can't isolate what it might be. It seems to be associated with the gradient as when I use display:inline-block the "padding" is gone, but so is the gradient.</p>

<p>How can I keep the gradient where it needs to be but remove the phantom "padding"?</p>

<p>I'm open to changing the HTML structure, but this must also work in IE9.</p>

<p>Chrome:</p>

<p><a href="https://i.stack.imgur.com/kLdgO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kLdgO.png" alt="as appears on Chrome"></a></p>

<p>Firefox:</p>

<p><a href="https://i.stack.imgur.com/7LeeV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7LeeV.png" alt="as appears on Firefox"></a></p>

<p>HTML:</p>

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

<p>CSS (SASS):</p>

<pre><code>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);
            }
        }
</code></pre>