滑块输入 [范围] 未显示在 Edge 中，但在其他所有浏览器中都正常显示。开车送我备用

Question

滑块输入[范围] 未在 Edge 中显示，但在所有其他浏览器中正常显示。开车送我。

希望这可能很简单，但我以前从未使用过 input[range]。非常感谢任何帮助。

在 Edge/IE 中它看起来像这样： Edge/IE version

Chrome, Safari and Firefox

#sliders {
  text-align: center;
  padding: 7px 0px;
  width: auto;
}

#sliderX1,
#sliderX2 {
  display: inline;
  width: auto;
}

.Xslider {
  display: inline;
  position: relative;
  margin: 10px 4px;
  padding: 10px 4px;
  border: 1px dotted #006699;
  border-radius: 4px;
  min-width: 45%;
}

.deadzone {
  position: absolute;
  top: 0.4rem;
  left: 2rem;
  background: rgba(0, 100, 150, 0.4);
  width: 2rem;
  height: 1.4rem;
  border-radius: 2px;
}

<div id="sliders">
  <datalist id="plus-stopsX">
  <option>200</option><option>400</option><option>600</option><option>700</option><option>800</option><option>900</option><option>1000</option> 
 </datalist>
  <datalist id="minus-stopsX">
  <option>-200</option><option>-400</option><option>-600</option><option>-700</option><option>-800</option><option>-900</option><option>-1000</option> 
 </datalist>
  <div class="Xslider">
    <div class="deadzone"></div>
    <label for="sliderX1">X1</label>
    <input id="sliderX1" type='range' min="0" max="1000" value="300" step="10" list="plus-stopsX" onchange="changeitem();">
  </div>
  <div class="Xslider">
    <label for="sliderX2">X2</label>
    <input id="sliderX2" type='range' min="-1000" max="0" value="-200" step="10" list="minus-stopsX" onchange="changeitem();">
  </div>
</div>

Answer 1

尝试为 sliderX1 和 sliderX2 的宽度设置固定值或百分比值属性，而不是使用自动。

    #sliders {
        text-align: center;
        padding: 7px 0px;
        width: auto;
    }

    #sliderX1,
    #sliderX2 {
        display: inline;
        width:15%;
    }

    .Xslider {
        display: inline;
        position: relative;
        margin: 10px 4px;
        padding: 10px 4px;
        border: 1px dotted #006699;
        border-radius: 4px;
        min-width: 45%;
    }

    .deadzone {
        position: absolute;
        top: 0.4rem;
        left: 2rem;
        background: rgba(0, 100, 150, 0.4);
        width: 2rem;
        height: 1.4rem;
        border-radius: 2px;
    }

然后，在 Edge/IE 浏览器中它看起来像这样：

滑块输入 [范围] 未显示在 Edge 中，但在其他所有浏览器中都正常显示。开车送我备用

Sliders input[range] not showing up in Edge but show up in every other browser fine. Driving me spare

html

css

input

microsoft-edge