Question

这可能只是一个Chrome错误，但我还没有发现它在任何地方提到过，所以我们走了。

我正在进行一项简单的练习，作为JavaScript30.com练习的一部分。练习使用一些HTML5范围输入来通过javascript更新CSS变量。

我注意到当我在响应式显示模式下使用Chrome开发者工具时，范围输入会从页面中消失。检查它们显示它们实际上在DOM中，但它们的高度已设置为0px。 CSS中没有任何东西可以看作是罪魁祸首，如果我退出响应式显示模式，输入会按预期显示。

这是Chrome工具的怪癖，还是有一些CSS可以防止这种情况发生？

紧随其后的代码。

＆＃13;

:root {
  --base: #f7c235;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

.highlight {
  color: var(--base);
}

body {
  text-align: center;
  background: #193549;
  color: white;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

.controls input {
  width: 12rem;
  min-height: 2rem;
}

＆＃13;

<div class="controls">
  <label for="spacing">Spacing:</label>
  <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

  <label for="blur">Blur:</label>
  <input type="range" name="blur" min="10" max="25" value="10" data-sizing="px">

  <label for="base">Base Color</label>
  <input type="color" name="base" value="#f7c235">

</div>

＆＃13;

Answer 1

我相信chrome会在响应模式下禁用样式。以下CSS规则将重新出现：

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #fff;
  height: 18px;
  width: 18px;
  margin-top: -8px;
  border-radius: 99px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 4px;
  background: #ddd;
}

HTML5滑块在Chrome的设备模式下消失

1 个答案: