HTML 元素在检查时不合适答案

【问题标题】：HTML elements out of place while inspecting themHTML 元素在检查时不合适
【发布时间】：2020-06-11 04:06:51
【问题描述】：

这是问题的图片。只需将我的鼠标想象成涂成红色的鼠标，因为打印屏幕不会捕获鼠标。

由于某些原因，即使鼠标不在元素上，元素也会突出显示。

有没有人经历过这样的事情？知道问题可能在这里吗？

编辑这是代码

    <div class="d-flex flex-column teamCard">
      <p class="teamCardHeading">Best performing teams</p>
      <div class="cardRow d-flex flex-row flex-wrap">
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
      </div>
    </div>

---CSS-----

.teamCard {
  width: 992px;
  border-radius: 16px;
  padding: 32px 24px 32px 24px;
  background-color: white;
  margin-bottom: 24px;
}

.teamCardHeading {
  font-family: Averta-Bold;
  font-size: 24px;
  line-height: 32px;
  color: #203767;
  margin-bottom: 24px;
}

.cardRow {
  width: 992px;
  margin-bottom: 24px;
}

@media only screen and (max-width: 480px) {
  .cardRow,
  .teamCard {
    width: 345px;
  }

  .teamMetricRow {
    width: 300px;
  }

  .goalProgress,
  .progressBar,
  .progressMade {
    display: none;
  }

  .teamMetricRowPoints {
    transform: translateX(-0px);
  }
}

最佳团队卡片组件

<template>
  <div class="bestTeamMetric d-flex flex-column">
    <p class="bestTeamMetricHeading">{{title}}</p>
    <div
      v-for="(rec, index) in records"
      :key="index"
      :style="{backgroundColor: index % 2 == 1 ? 'white' : '#f7f8fb'}"
      class="d-flex flex-row teamMetricRow justify-content-around"
    >
      <div class="d-flex flex-column">
        <p class="teamMetricRowTeam">{{rec.team}}</p>
        <p class="teamMetricRowMembers">{{rec.members}} members</p>
      </div>

      <p class="teamMetricRowPoints align-self-center">{{rec.points}}pts</p>

      <div class="d-flex flex-column align-self-center goalProgress">
        <div class="progressBar"></div>
        <div class="progressMade"></div>
      </div>
    </div>
  </div>
</template>

---CSS---

<style scoped lang="scss">
.bestTeamMetric {
  width: 456px;
  margin-right: 35px;
  margin-bottom: 30px;
}

.bestTeamMetricHeading {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #5c6170;
}

.teamMetricRow {
  width: 456px;
  //   height: 56px;
  padding-top: 8px;
}

.teamMetricRowTeam {
  font-family: Averta-Bold;
  font-size: 16px;
  line-height: 24px;
  color: #203767;
}

.teamMetricRowMembers {
  font-family: Avenir;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  color: #7e88a1;
}

.teamMetricRowPoints {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #203767;
}

.goalProgress {
  margin-bottom: 16px;
  transform: translateX(-50px);
}

.progressBar {
  position: absolute;
  width: 192px;
  height: 3px;
  z-index: 1;
  background: #f6f7ff;
  border-radius: 32px;
}

.progressMade {
  width: 120px;
  height: 3px;
  z-index: 2;
  background: #2ab2ff;
  border-radius: 32px;
}

@media only screen and (max-width: 480px) {
  .bestTeamMetric {
    width: 345px;
  }

  .teamMetricRow {
    width: 300px;
  }

  .goalProgress,
  .progressBar,
  .progressMade {
    display: none;
  }
}

【问题讨论】：

请分享代码。

标签： html css vue.js flexbox web-inspector

【解决方案1】：

我真的不知道怎么做，但现在一切正常。有一些按钮在实际位置上方 100 像素处被点击，但它们现在也在工作。我经常遇到一些晦涩难懂的错误...我没有更改任何 CSS 样式，这似乎是浏览器 web-inspecter/console 问题

【讨论】：