这可能只是一个Chrome bug,但我还没有发现它在任何地方提到过,所以我们走了.
我正在进行一项简单的练习,作为JavaScript30.com练习的一部分.练习使用一些HTML5范围输入来通过javascript更新CSS变量.
我注意到,当我在响应式显示模式下使用Chrome开发人员工具时,范围输入会从页面中消失.检查它们显示它们实际上在DOM中,但它们的高度已设置为0px.CSS中没有任何内容可以看作是罪魁祸首,如果我退出响应式显示模式,输入会按预期显示.
这是Chrome的工具的怪癖还是有一些CSS来防止这种情况？
下面是精简代码.
: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;
}<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 …