<!DOCTYPE html> 和 <input type="text">

问题描述

期望的结果是将输入字段和一些文本放在一行上，让文本占据视口中的所有空间，而不会与文本重叠。

Chrome、Safari 和 FireFox 都同意，所以合乎逻辑的结论是我一直在以某种我没有意识到的方式依赖“几乎标准模式”。但是带有“DOCTYPE html”的行为似乎不合常理。

幸运的是，我可以将其最小化为准系统示例。对于“DOCTYPE html”，输入字段与以下文本重叠。没有它，它的行为与我预期的一样。

<div style="display: flex; flex-flow: row,Nowrap">
  <div style="width: 100%">
    <!-- "width" here doesn't help or hinder-->
    <input type="text" style="width:100%">
  </div>
  <div>
    OK?
  </div>
</div>

怎么回事？

解决方法

既然用户yomisimie解决了，我就把它放在这里关闭线程。 “你有没有试过给所有元素添加 box-sizing？或者至少只有那些交互的元素（div，输入）？* { box-sizing: border-box; } – yomisimie”

所以半令人惊讶的是，除非您指定 { box-sizing: border-box; }.我本来打算全局执行但不小心把它放在 BODY 而不是 * 规则中。

html quirks-mode