Question

这是一个例子。我想让滑块拉伸到父容器的整个宽度。下面的代码看起来像我想要的Chrome，但在Firefox中滑块没有拉伸。但是我在他们的跟踪器上找不到任何针对该问题的错误，也许我错过了什么？

#block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
  align-items: stretch;
}

input {
  background-color: yellow;
}

<div id=block>
  <input type=range />
</div>

Answer 1

具有列方向的弹性容器，并且默认值align-items为stretch，将拉伸弹性项目以沿其横轴填充其容器，与它的宽度相同。

所以在你的情况下，它应该按原样运行，但在Firefox，Edge和IE中并非如此。他们都需要width: 100% input类型range来填充容器。

作为比较，input类型text和checkbox以及textarea的{{1}}确实拉伸了跨浏览器，但再次input为typ {{1}在Firefox中没有。

Firefox（和Edge / IE）是否正确或有错误我还不能说。我已经搜遍过，找不到直接的答案，但是一旦我这样做，我会更新这个答案。

截至今天，我建议将宽度设置为100％，如果Chrome正确无误，则不会造成任何损害，以后可以将其删除。

checkbox

#block {
  /* width: 100%;              not needed since it is the default */
  height: 100%;             /* as its parent doesn't have a height, 
                               this doesn't do anything */
  display: flex;
  flex-direction: column;
  background-color: green;
  /* align-items: stretch;     this is the defalt and can be omitted */
}

input, textarea, span {
  background-color: yellow;

  width: 100%;              /* make FF/Edge/IE stretch input range */
  
  margin: 0;                /* remove any default margin an element might have */
  padding: 0;               /* remove any default padding an element might have */

  box-sizing: border-box;   /* include border an element might have in the set width */
}

Answer 2

您必须将<input>标记的宽度设置为100％才能获得所需内容！

#block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
  padding: 0;
}

input {
  background-color: yellow;
  width: 100%;
  margin: 0;
}

<div id=block>
  <input type=range />
</div>

输入类型=范围在Firefox中不伸缩

2 个答案: