flex div 中的 SVG 图像在 Safari 和 Chrome 中的显示方式不同
Posted
技术标签:
【中文标题】flex div 中的 SVG 图像在 Safari 和 Chrome 中的显示方式不同【英文标题】:SVG images inside flex div display differently in Safari and Chrome 【发布时间】:2018-02-28 14:22:27 【问题描述】:Chrome 包含 SVG,而 Safari 则可以将其扩展到更大的尺寸。不知道我能做些什么来摆脱这种行为。
这是一支笔:https://codepen.io/sashakevich/pen/boEPdb 在 Chrome 中完美,在 Safari 中图像太大。
这是代码:
*
-webkit-box-sizing: border-box;
box-sizing: border-box;
.row
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 30px 10px;
.text-item
-ms-flex-preferred-size: 200px;
flex-basis: 200px;
margin: 0 1.5%;
.img-item
-ms-flex-preferred-size: 33%;
flex-basis: 33%;
margin: 0 1.5%;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
background: #fff;
border-radius: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 25px 35px;
min-height: 200px;
.img-item img
width: 100%;
height: auto;
<div class="row" style="background:#f1f1f1;">
<div class="text-item">
<p>A remake of their old logo of a kid holding a toothbrush.</p>
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-1.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-2.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-3.svg">
</div>
</div>
<div class="row" style="background:#e1e1e1;">
<div class="text-item">
<p>A remake of their old logo of a kid holding a toothbrush.</p>
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-3.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-1.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-2.svg">
</div>
</div>
@Steve-Schrab 的弹性收缩解决方案没有帮助 - SVG in flexbox messes up height of other elements) (也许我遇到了@michael_b 在此处建议的 Flex 项目的隐含最小尺寸:Why doesn't flex item shrink past content size? 但如果我遇到了,我不知道该怎么做才能使其正常运行。
【问题讨论】:
从img-item
中删除display: flex
@LGSon 这并没有真正的帮助。我在父级上有 flex,因为它使子级在垂直和水平方向上居中,而我不必弄乱变换。我并不完全反对走这条路,但想看看是否有更优雅的解决方案可用。此外,当我摆脱两者时,它只保留大小: display: -ms-flexbox;显示:弯曲;我必须保留: display: -webkit-box; ...但不一致:developer.mozilla.org/en-US/docs/Web/CSS/box-flex。如果我也摆脱它,那么图像就会完全符合我的要求。
【参考方案1】:
.img-item
上的 min-height
似乎是导致问题的原因。将其更改为 max-height
可能会获得所需的结果。
*
-webkit-box-sizing: border-box;
box-sizing: border-box;
.row
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 30px 10px;
.text-item
-ms-flex-preferred-size: 200px;
flex-basis: 200px;
margin: 0 1.5%;
.img-item
-ms-flex-preferred-size: 33%;
flex-basis: 33%;
margin: 0 1.5%;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
background: #fff;
border-radius: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* justify-content: center; */
/* align-self: stretch; */
padding: 25px 35px;
min-height: 200px;
/* position: relative; */
.img-item img
width: 100%;
height: auto;
<div class="row" style="background:#f1f1f1;">
<div class="text-item">
<p>A remake of their old logo of a kid holding a toothbrush.</p>
</div>
<div class="img-item"><img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-1.svg"></div>
<div class="img-item"><img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-2.svg"></div>
<div class="img-item"><img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-3.svg"></div>
</div>
<div class="row" style="background:#e1e1e1;">
<div class="text-item">
<p>A remake of their old logo of a kid holding a toothbrush.</p>
</div>
<div class="img-item"><img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-3.svg"></div>
<div class="img-item"><img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-1.svg"></div>
<div class="img-item"><img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-2.svg"></div>
</div>
【讨论】:
是的,有点。我的意思是它在 Safari 中限制得很好,但是在完整的代码中我使用媒体查询,所以当它是智能手机时,flex-basis 是 100% 并且高度大于桌面版本。在最坏的情况下,我会编写这些额外的规则,但我希望 1) 了解 Safari 为何表现不同,以及 2) 找到不需要太多代码的解决方案(我也有一些平板电脑条件)。以上是关于flex div 中的 SVG 图像在 Safari 和 Chrome 中的显示方式不同的主要内容,如果未能解决你的问题,请参考以下文章