Chrome浏览器计算错误的元素宽度答案

【问题标题】：Chrome browser calculates the wrong element widthChrome浏览器计算错误的元素宽度
【发布时间】：2020-05-21 09:57:33
【问题描述】：

我正在处理需要垂直显示的文本元素。

为此，我使用以下 CSS：

transform: rotate(180deg);
writing-mode: vertical-rl;

但是，在 Chromium（和其他 Blink 浏览器）中，该元素的宽度计算得非常奇怪。

一次性解决这个问题有很多方法：

打开 DevTools (F12)，为该元素设置固定宽度 (width: 1px) 并禁用该选项，一切正常。
把窗口宽度改小一点。
使用较小的文本 - 删除换行符 (<br>)，输入更多或更少的文本等。

无法在 JSFiddle 中重新创建相同的修复程序。但是，在这里您可以了解我的意思。尝试使用 WebKit 和其他引擎（即 Firefox）在浏览器中打开它 - 会有不同的结果。

https://jsfiddle.net/VoG__/qfkgt7m9/7/

我也在使用 Debian 8，但问题出现在任何操作系统上。

有什么问题？如何使用 CSS 解决此问题？

.content {
  padding: 30px;
  background-color: #bbb;
}
.project-info {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 1fr);
}
.project-info .item {
  border: 3px solid #fff;
  display: flex;
  flex-wrap: nowrap;
}
.project-info .item .heading {
  margin-left: -1px;
  margin-bottom: -1px;
  padding: 10px;
  color: #555;
  font-size: 20px;
  font-family: sans-serif;
  background-color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}
.project-info .item .text {
  padding: 20px;
  font-family: sans-serif;
}

<div class="content">
  <div class="project-info">
    <div class="item">
      <div class="heading">Item long text</div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
    </div>
    <div class="item">
      <div class="heading">Item</div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
    </div>
  </div>
</div>

29.09.2020 更新

该问题似乎在最新版本的 Chrome（和类似版本）中消失了，也无法在 Firefox 中重现。会接受答案，提供它在旧版本中的外观截图，并说明为什么会发生这种情况以及究竟是什么修复了它。

【问题讨论】：

请注意，Chrome 不是 webkit 浏览器，而是使用 Blink 代替（尽管它最初来自 webkit）。另请注意，webkit 浏览器在许多版本和多年前都不需要这些供应商前缀，当前的 Microsoft 浏览器也不需要它们。
嗯...这与.item 上的边框有关...如果您将其关闭，宽度将恢复为正确的大小。
@Paulie_D 无法重现您的解决方案。你确定是关于边界的吗？因为在代码检查器中，我看到它与文本的宽度有关。
当我使用开发人员工具检查 sn-p 并切换边框时，宽度会重置为正常。我无法在 Codepen 中重现它。

标签： html css firefox webkit chromium

【解决方案1】：

发现这与换行/分词有关...

所以第一个（原始）解决方案是将所有标题文本保留在一行中。

.project-info .item .heading {
  ...
  white-space: nowrap;
}

但我仍在寻找一个正确的答案，以允许标题文本堆叠成多行。

【讨论】：