我有一個網站長期以來一直運行良好，今天我的一位同事告訴我，在更新到最新版本的 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 中，球會隨著它的高度而偏移。
uj5u.com熱心網友回復：
可以確認最新的 Chrome 版本打破了這一點。
(102.0.5005.61)
這是由于summary-image-wrapper存在一個display: 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>uj5u.com熱心網友回復：
如果您需要保持容器元素塊級別，另一種解決方法是打開元素的大小限制。例如contain: size或contain: 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481793.html