时间戳

首页 > 解决方案 > 如何找出哪个 CSS 元素强制指定大小？

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

问题描述

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

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

<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 来调查该空间的来源”。

标签： htmlcssgoogle-chromefirefoxgoogle-chrome-devtools

解决方案

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

在此处输入图像描述

如果它“变灰”，那么您应该查看浏览器默认设置。过去，人们使用 CSS 重置片段，但您应该更有意识地应用重置。

这也可以帮助：

// 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);
})();

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

推荐阅读