如何找出哪个 CSS 元素强制指定大小？答案

【问题标题】：How to find out which CSS element forces a specific size?如何找出哪个 CSS 元素强制指定大小？
【发布时间】：2021-10-17 17:26:12
【问题描述】：

我正在编写一个家庭仪表板（使用Quasar）并偶然发现了一个我想调试的问题。这个问题的目的是了解我应该如何进行调试，但如果有人也有我的问题的答案，那当然非常欢迎:)

在 Chrome 中，其中一个元素具有奇怪的行为。它是<emploi-du-temps> 组件的 2x2 CSS 网格

<template>
(...)
    <div class="emploi-du-temps" v-if='displayEdt' ref="edt">
      <emploi-du-temps class="" :data='dataEdt' when="today" who="michael"></emploi-du-temps>
      <emploi-du-temps class="" :data='dataEdt' when="tomorrow" who="michael"></emploi-du-temps>
      <emploi-du-temps class="" :data='dataEdt' when="today" who="martin"></emploi-du-temps>
      <emploi-du-temps class="" :data='dataEdt' when="today" who="martin"></emploi-du-temps>
    </div>
(...)
<template>

<style scoped>
.emploi-du-temps {
  display: grid;
  grid-template-columns: 70fr 30fr;
}
</style>

如下所示，div 的总高度不等于行的高度（没有添加填充/边距，所有四个组件的行为相同）：

换句话说，在最后一行（您在此处看到“martin”）和我要调查的浅蓝色元素之间有这个空间。 DevTools Element → Styles 中的底部矩形图表没有显示任何边距/填充，因此它必须来自其他地方。

现在，奇怪的是 Firefox 中显示的同一页面的行为符合预期（没有多余的空间）：

我的问题是不是“出了什么问题”（没有提供代码，我可能需要转储整个应用程序，因为简单的 JSFiddel 测试表现正常。但是，嘿，如果有人知道我是所有的耳朵），而是“我如何使用 DevTools 来调查该空间的来源”。

【问题讨论】：

坏消息是你可能做不到。这具有由计算布局的顺序引起的 Chromium 错误的所有特征。该布局如何实现的证据可能已经消失，并且在开发工具中根本不可见。

标签： html css google-chrome firefox google-chrome-devtools

【解决方案1】：

您是否尝试过 Chrome 开发工具中的“计算”选项卡？如果某些东西正在设置计算的 CSS 属性，它将是可见的，并且在悬停时，您会看到一个小箭头，它将引导您进入具有该设置的 CSS 规则：

如果它“变灰”，那么您应该查看浏览器默认设置。过去，人们使用 CSS 重置 sn-ps，但您应该更自觉地应用重置。

这也有帮助：

// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
    var domStyle = document.createElement("style");
    domStyle.append(
            '* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
            * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * { background-color: rgba(0,0,255,.2) !important; }\
            * * * * { background-color: rgba(255,0,255,.2) !important; }\
            * * * * * { background-color: rgba(0,255,255,.2) !important; }\
            * * * * * * { background-color: rgba(255,255,0,.2) !important; }\
            * * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
            * * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }'
    );
    document.body.appendChild(domStyle);
})();

如果您将其输入浏览器控制台，它将显示您页面的网格。有时它可以帮助我调查此类问题。

【讨论】：