<；textarea>；比<；textarea>；当文档具有<；时；！DOCTYPE html>；含铬_Html_Css_Google Chrome

<；textarea>；比<；textarea>；当文档具有<；时；！DOCTYPE html>；含铬

html css google-chrome

<；textarea>；比<；textarea>；当文档具有<；时；！DOCTYPE html>；含铬,html,css,google-chrome,Html,Css,Google Chrome,尝试将此HTML粘贴到文件中并在Chrome中打开：父对象比文本区域大一点：这只是Chrome（不是Firefox）上的情况我注意到，如果我删除doctype，它的行为正常-父级大小正确。我的第一个想法是，它只是不同的默认用户代理样式。有doctype和没有doctype的用户代理样式之间存在差异：因此，我尝试匹配填充和框大小，如下所示： <!DOCTYPE html> <html> <head></head> <bo

尝试将此HTML粘贴到文件中并在Chrome中打开：

父对象比文本区域大一点：

这只是Chrome（不是Firefox）上的情况

我注意到，如果我删除doctype，它的行为正常-父级大小正确。我的第一个想法是，它只是不同的默认用户代理样式。有doctype和没有doctype的用户代理样式之间存在差异：

因此，我尝试匹配

填充

和

框大小

，如下所示：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>
      <textarea style="box-sizing: border-box; padding: 2px 0px 0px 2px;"></textarea>
    </div>
  </body>
</html>

但问题并没有消失。知道是什么引起的吗

（很抱歉图像尺寸过大-我不知道有什么降价技巧可以使它们的尺寸更合理。）

是的，这是一个很好的选择

最好的解决方法是将其设置为块类型框

textarea {
  display: block;
}

将textarea上的“垂直对齐”属性设置为“中间”或“顶部”似乎可以解决此问题，这在内联元素中很常见。间隙是为下行文本元素保留的空间。它根据文本区域内容的字体和线条属性放置文本区域的基线，并默认文本区域与文本底部的垂直对齐。值得注意的是，尽管说textarea应该呈现为“内联块”框，但两者都没有将其垂直对齐方式视为一个。啊，我认为这里一定有可疑之处——特别是因为它只发生在Chrome中。感谢您找到错误报告！