小编sas*_*ich的帖子

flex div 内的 SVG 图像在 Safari 和 Chrome 中显示不同

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; …
Run Code Online (Sandbox Code Playgroud)

css safari svg google-chrome flexbox

5
推荐指数
1
解决办法
2261
查看次数

标签 统计

css ×1

flexbox ×1

google-chrome ×1

safari ×1

svg ×1