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

Question

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

\n

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

\n

\r\n

\r\n

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

\r\n

<div class="small-container" data-v-08ab2d5a="">\n  <article class="article" data-v-08ab2d5a="">\n    <div class="text-row__column" data-v-08ab2d5a="">\n      <div data-v-08ab2d5a=""><strong class="text-row__title" data-v-08ab2d5a="">\n                      A fertile environment for talent to grow\n                    </strong>\n        <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\xe2\x80\x99s talents and the opportunity to learn from one another. As Xxxxxxx\n          (Training Specialist) says; <br></p>\n      </div>\n    </div>\n    <div class="text-row__column" data-v-08ab2d5a="">\n      <div data-v-08ab2d5a="">\n        <!---->\n        <p class="style-success-story-quote" data-v-08ab2d5a="">\xe2\x80\x9cIt\xe2\x80\x99s really inspiring to work with talented people.\xe2\x80\x9d</p>\n      </div>\n    </div>\n    <div class="text-row__column" data-v-08ab2d5a="">\n      <div class="summary-image-outer" data-v-08ab2d5a="">\n        <div class="summary-image-wrapper" data-v-08ab2d5a="">\n          <div class="summary-image" style="" data-v-08ab2d5a=""></div>\n        </div>\n      </div>\n    </div>\n    <div class="text-row__column" data-v-08ab2d5a="">\n      <div data-v-08ab2d5a="">\n        <!---->\n        <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, \xe2\x80\x9cat Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.\xe2\x80\x9d This also seems\n          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 \xe2\x80\x9cvery fertile environment in terms of learning and developing.\xe2\x80\x9d<br><br>One of the\n          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\n          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\n          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\n          people take their work seriously but they don\xe2\x80\x99t take themselves too seriously. There isn\xe2\x80\x99t anyone with a big ego and the culture is team-oriented.</p>\n      </div>\n    </div>\n    <div class="text-row__column" data-v-08ab2d5a="">\n      <div data-v-08ab2d5a="">\n        <!---->\n        <p class="style-success-story-quote" data-v-08ab2d5a="">\xe2\x80\x9cI have a feeling people take their work seriously but they don\xe2\x80\x99t take themselves too seriously.\xe2\x80\x9d<br></p>\n      </div>\n    </div>\n  </article>\n</div>

\r\n

\r\n

\r\n

\n

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

\n

在所有浏览器中，绿色球都完美地位于红色框内，而在最新的镀铬中，球会随着其高度而偏移。

\n

Answer 1

可以确认最新的 Chrome 版本打破了这个问题。
\n _{（102.0.5005.61）}

\n\n

这是由summary-image-wrappera引起的display: block。

\n

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

\n

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

\n

\r\n

\r\n

* {box-sizing: border-box; }\n.small-container[data-v-08ab2d5a] {max-width: 800px; margin: 0 auto; }\n.article[data-v-08ab2d5a] {-moz-column-count: 2; column-count: 2; grid-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }\n.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; }\n.summary-image-outer[data-v-08ab2d5a] {padding: 0 50px; margin-top: 0; width: 100%; }\n\n.summary-image-wrapper[data-v-08ab2d5a] {\n    padding-top: 100%;\n    position: relative;\n    width: 100%;\n    background: red;\n    display: inline-block;\n}\n\n.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; }

\r\n

<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\xe2\x80\x99s 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="">\xe2\x80\x9cIt\xe2\x80\x99s really inspiring to work with talented people.\xe2\x80\x9d</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, \xe2\x80\x9cat Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.\xe2\x80\x9d 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 \xe2\x80\x9cvery fertile environment in terms of learning and developing.\xe2\x80\x9d<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\xe2\x80\x99t take themselves too seriously. There isn\xe2\x80\x99t 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="">\xe2\x80\x9cI have a feeling people take their work seriously but they don\xe2\x80\x99t take themselves too seriously.\xe2\x80\x9d<br></p></div></div></article></div>

\r\n

\r\n

\r\n

\n