我有一个网站已经运行很长时间了,今天我的一位同事告诉我,在更新到最新版本的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/
在所有浏览器中,绿色球完全位于红色框内,而在最新的 chromium 合金中,球会随高度偏移.