css - 范围 slider 端点在 Firefox 中被切断

Question

我正在为 reasonably cross-browser native range slider 编写 CSS .在 Chrome 中，端点很好，但在 Firefox 中，它们被切断了。我怎样才能将它们规范化以便在 Firefox 中不被切断？

HTML

<fieldset class="range__field">
    <input class="range is-stacking" type="range" min="0" max="10">
    <svg class="range__axis is-stacking" role="presentation" width="100%" height="10" xmlns="http://www.w3.org/2000/svg">
        <rect class="range__tick" x="0%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="10%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="20%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="30%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="40%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="50%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="60%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="70%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="80%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="90%" y="3" width="1" height="10"></rect>
        <rect class="range__tick" x="100%" y="3" width="1" height="10"></rect>
    </svg>
    <svg class="range__axis is-stacking" role="presentation" width="100%" height="14" xmlns="http://www.w3.org/2000/svg">
        <text class="range__point" x="0%" y="14" text-anchor="middle">0</text>
        <text class="range__point" x="10%" y="14" text-anchor="middle">1</text>
        <text class="range__point" x="20%" y="14" text-anchor="middle">2</text>
        <text class="range__point" x="30%" y="14" text-anchor="middle">3</text>
        <text class="range__point" x="40%" y="14" text-anchor="middle">4</text>
        <text class="range__point" x="50%" y="14" text-anchor="middle">5</text>
        <text class="range__point" x="60%" y="14" text-anchor="middle">6</text>
        <text class="range__point" x="70%" y="14" text-anchor="middle">7</text>
        <text class="range__point" x="80%" y="14" text-anchor="middle">8</text>
        <text class="range__point" x="90%" y="14" text-anchor="middle">9</text>
        <text class="range__point" x="100%" y="14" text-anchor="middle">10</text>
    </svg>
</fieldset>

SCSS

*, :before, :after {
    box-sizing: border-box;
}

@import "bourbon";

// Adapted from http://danielstern.ca/range.css
// Uses .range to target instead of [type="range"]
// Warning: Don't group vendor rules

$tick-color: silver;
$point-color: silver;
$endpoint-color: silver;
$value-color: blue;
$track-left-color: blue;
$track-right-color: silver;
$thumb-color: white;
$thumb-width: 20px;
$thumb-height: 20px;
$track-height: 5px;
$track-radius: $track-height / 2;

@function range-gradient($midpoint) {
    @return linear-gradient(to right, $track-left-color $midpoint, $track-right-color 0);
}

@mixin range-track() {
    width: 100%;
    height: $track-height;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: $track-left-color;
    border-radius: $track-radius;
    border: 0;
}

@mixin range-thumb() {
    box-shadow: 1px 1px 1px black, 0px 0px 1px black;
    border: 0;
    height: $thumb-height;
    width: $thumb-width;
    border-radius: 50%;
    background: $thumb-color;
    cursor: pointer;
}

input.range {
    -webkit-appearance: none;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;

    // Stick the ticks to the range
    @include transform(translateY(1em));
    margin-top: -1em;

    &:focus {
        outline: 0;
    }

    // http://stackoverflow.com/a/24203354/770127
    &::-moz-focus-outer {
        border: 0;
    }
}

input.range::-webkit-slider-thumb {
    @include range-thumb;
    -webkit-appearance: none;
    // http://bitly.com/webkit-thumb-offset
    margin-top: $track-height / 2 - $thumb-height / 2;
}

input.range::-moz-range-thumb {
    @include range-thumb;
}

input.range::-webkit-slider-runnable-track {
    @include range-track;
}

input.range::-moz-range-track {
    @include range-track;
}

input.range::-ms-track {
    width: 100%;
    height: $track-height;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input.range::-ms-thumb {
    @include range-thumb;
    height: $track-height;
}

input.range::-ms-fill-lower,
input.range::-ms-fill-upper {
    background: $track-left-color;
    border: 0;
    border-radius: $track-height;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}

@if $track-left-color != $track-right-color {
    @for $i from 0 through 10 {
        input.range[data-range-value="#{$i}"] {
            &::-webkit-slider-runnable-track {
                @include background-image(range-gradient(percentage($i / 10)));
            }

            &::-moz-range-track {
                @include background-image(range-gradient(percentage($i / 10)));
            }
        }
    }
}

// Fit the axes to the range
// http://stackoverflow.com/a/40392411/770127
.range__axis {
    padding-left: $thumb-width / 2;
    padding-right: $thumb-width / 2;
}

.range__tick {
    fill: $tick-color;
}

.range__point {
    fill: $point-color;
}

// Endpoint color
@if $point-color != $endpoint-color {
    .range__point:first-child,
    .range__point:last-child {
        fill: $endpoint-color;
    }
}

// Current value color
@if $point-color != $value-color {
    @for $i from 0 through 10 {
        [data-range-percent="#{10 * $i}"] ~ svg .range__point[x="#{10 * $i}%"] {
            fill: $value-color;
        }
    }
}

.range__field {
    border: 0;
    padding: 0;
}

Answer 1

我想最简单的答案是将 overflow="visible"添加到第二个 <svg>元素。

更好的解决方案是首先不要绘制 svg Canvas 的边缘，即通过从大于 0% 的 x 值开始并在之前完成，将文本从边缘移动一点100%。