Chrome 破坏了我的 CSS/HTML 版本 102.0.5005.61

Chrome broke my CSS/HTML with Version 102.0.5005.61

我有一个网站已经运行了很长时间,今天我的一位同事告诉我,在更新到最新版本 chrome 后,该网站有几个地方出现故障。

我使用 html 和 css 创建了一个问题的快速小样本。这个问题似乎与使用列有关(据我所知)

* {
  box-sizing: border-box;
}

.small-container[data-v-08ab2d5a] {
  max-width: 800px;
  margin: 0 auto;
}

.article[data-v-08ab2d5a] {
  -moz-column-count: 2;
  column-count: 2;
  grid-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}

.article .text-row__column[data-v-08ab2d5a] {
  padding: 10px 0;
  flex: 0 0 50%;
  order: 0!important;
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -.16px;
  text-align: left;
  color: #1d1f27;
  line-height: 24px;
}

[data-v-08ab2d5a] .style-success-story-quote {
  font-family: Inter;
  font-size: 22px;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -.63px;
  color: #f4a331;
  padding-top: 30px;
}

.summary-image-outer[data-v-08ab2d5a] {
  padding: 0 50px;
  margin-top: 0;
  width: 100%;
}

.summary-image-wrapper[data-v-08ab2d5a] {
  padding-top: 100%;
  position: relative;
  width: 100%;
  background: red;
}

.summary-image-wrapper .summary-image[data-v-08ab2d5a] {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  background-color: green;
}
<div class="small-container" data-v-08ab2d5a="">
  <article class="article" data-v-08ab2d5a="">
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a=""><strong class="text-row__title" data-v-08ab2d5a="">
                      A fertile environment for talent to grow
                    </strong>
        <p class="style-default" data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx
          (Training Specialist) says; <br></p>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a="">
        <!---->
        <p class="style-success-story-quote" data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div class="summary-image-outer" data-v-08ab2d5a="">
        <div class="summary-image-wrapper" data-v-08ab2d5a="">
          <div class="summary-image" style="" data-v-08ab2d5a=""></div>
        </div>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a="">
        <!---->
        <p class="style-default" data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems
          to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the
          other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall
          it seemed like people really care about the company, the people and the products they co-create.<br><br>My first impression seems to be an accurate reflection of how other team members feel, as they frequently mention how emotionally invested
          they are in their work, their team and the success of the business. There is a culture of care and a sense that everybody feels they are part of something bigger than themselves. Now that I have been in the team for a few months, I have a feeling
          people take their work seriously but they don’t take themselves too seriously. There isn’t anyone with a big ego and the culture is team-oriented.</p>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a="">
        <!---->
        <p class="style-success-story-quote" data-v-08ab2d5a="">“I have a feeling people take their work seriously but they don’t take themselves too seriously.”<br></p>
      </div>
    </div>
  </article>
</div>

https://jsfiddle.net/xeb3rLcg/1/

在所有浏览器中,绿球完全位于红框内,而在最新的 chrome 中,球的高度发生了偏移。

可以确认最新的 Chrome 版本打破了这个。
(102.0.5005.61)


这是因为 summary-image-wrapperdisplay: block

应用以下 CSS 规则将其更改为 display: inline-block 以解决问题:

.summary-image-wrapper[data-v-08ab2d5a] {
    padding-top: 100%;
    position: relative;
    width: 100%;
    background: red;
    display: inline-block;
}

* {box-sizing: border-box; }
.small-container[data-v-08ab2d5a] {max-width: 800px; margin: 0 auto; }
.article[data-v-08ab2d5a] {-moz-column-count: 2; column-count: 2; grid-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
.article .text-row__column[data-v-08ab2d5a] {padding: 10px 0; flex: 0 0 50%; order: 0!important; font-family: Inter; font-size: 16px; font-weight: 400; font-stretch: normal; font-style: normal; letter-spacing: -.16px; text-align: left; color: #1d1f27; line-height: 24px; } [data-v-08ab2d5a] .style-success-story-quote {font-family: Inter; font-size: 22px; font-weight: 700; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: -.63px; color: #f4a331; padding-top: 30px; }
.summary-image-outer[data-v-08ab2d5a] {padding: 0 50px; margin-top: 0; width: 100%; }

.summary-image-wrapper[data-v-08ab2d5a] {
    padding-top: 100%;
    position: relative;
    width: 100%;
    background: red;
    display: inline-block;
}

.summary-image-wrapper .summary-image[data-v-08ab2d5a] {position: absolute; top: 0; height: 100%; width: 100%; background-size: cover; background-position: 50%; border-radius: 50%; background-color: green; }
<div class="small-container" data-v-08ab2d5a=""><article class="article" data-v-08ab2d5a=""><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><strong class="text-row__title" data-v-08ab2d5a=""> A fertile environment for talent to grow </strong> <p class="style-default" data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx (Training Specialist) says; <br></p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-success-story-quote" data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div class="summary-image-outer" data-v-08ab2d5a=""><div class="summary-image-wrapper" data-v-08ab2d5a=""><div class="summary-image" style="" data-v-08ab2d5a=""></div></div></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-default" data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall it seemed like people really care about the company, the people and the products they co-create.<br><br>My first impression seems to be an accurate reflection of how other team members feel, as they frequently mention how emotionally invested they are in their work, their team and the success of the business. There is a culture of care and a sense that everybody feels they are part of something bigger than themselves. Now that I have been in the team for a few months, I have a feeling people take their work seriously but they don’t take themselves too seriously. There isn’t anyone with a big ego and the culture is team-oriented.</p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-success-story-quote" data-v-08ab2d5a="">“I have a feeling people take their work seriously but they don’t take themselves too seriously.”<br></p></div></div></article></div>

如果您需要保持容器元素块级别,另一种选择 work-around 是为元素打开大小限制。例如 contain: sizecontain: strict.

* {
  box-sizing: border-box;
}

.small-container[data-v-08ab2d5a] {
  max-width: 800px;
  margin: 0 auto;
}

.article[data-v-08ab2d5a] {
  -moz-column-count: 2;
  column-count: 2;
  grid-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}

.article .text-row__column[data-v-08ab2d5a] {
  padding: 10px 0;
  flex: 0 0 50%;
  order: 0!important;
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -.16px;
  text-align: left;
  color: #1d1f27;
  line-height: 24px;
}

[data-v-08ab2d5a] .style-success-story-quote {
  font-family: Inter;
  font-size: 22px;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -.63px;
  color: #f4a331;
  padding-top: 30px;
}

.summary-image-outer[data-v-08ab2d5a] {
  padding: 0 50px;
  margin-top: 0;
  width: 100%;
}

.summary-image-wrapper[data-v-08ab2d5a] {
  padding-top: 100%;
  position: relative;
  width: 100%;
  background: red;
  contain: size;
}

.summary-image-wrapper .summary-image[data-v-08ab2d5a] {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  background-color: green;
}
<div class="small-container" data-v-08ab2d5a="">
  <article class="article" data-v-08ab2d5a="">
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a=""><strong class="text-row__title" data-v-08ab2d5a="">
                      A fertile environment for talent to grow
                    </strong>
        <p class="style-default" data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx
          (Training Specialist) says; <br></p>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a="">
        <!---->
        <p class="style-success-story-quote" data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div class="summary-image-outer" data-v-08ab2d5a="">
        <div class="summary-image-wrapper" data-v-08ab2d5a="">
          <div class="summary-image" style="" data-v-08ab2d5a=""></div>
        </div>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a="">
        <!---->
        <p class="style-default" data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems
          to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the
          other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall
          it seemed like people really care about the company, the people and the products they co-create.<br><br>My first impression seems to be an accurate reflection of how other team members feel, as they frequently mention how emotionally invested
          they are in their work, their team and the success of the business. There is a culture of care and a sense that everybody feels they are part of something bigger than themselves. Now that I have been in the team for a few months, I have a feeling
          people take their work seriously but they don’t take themselves too seriously. There isn’t anyone with a big ego and the culture is team-oriented.</p>
      </div>
    </div>
    <div class="text-row__column" data-v-08ab2d5a="">
      <div data-v-08ab2d5a="">
        <!---->
        <p class="style-success-story-quote" data-v-08ab2d5a="">“I have a feeling people take their work seriously but they don’t take themselves too seriously.”<br></p>
      </div>
    </div>
  </article>
</div>