在Safari

时间:2018-02-02 18:14:28

标签: safari flexbox

我试图将div与flexbox并排放置,但是在Safari的safari中无效。 它正在运行Chrome,Firefox,Edge和Internet Explorer 11。 有人可以帮帮我吗?和合

all browsers

safari

看起来白色块具有box-sizing:content-box,但它没有...

有谁知道为什么? 代码:fiddle

.flex {
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.box-full {
  width: 100%;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
  margin-bottom: 34px;
}
.box-fridge {
  &:last-of-type {
    margin-bottom: 40px;
  }

  .block-left {
    padding: 21px 22px;
    flex-grow: 2;
  }

  .block-right {
    border-radius: 0 3px 3px 0;
    background-color: #4681A8;
    max-width: 190px;
    flex-grow: 1;
  }

  .title-fridge {
    font-size: 24px;
    font-weight: 500;
    line-height: 29px;
  }

  .desc {
    font-size: 12px;
    font-weight: 300;
    line-height: 15px;
    margin-top: 17px;
  }

  .block {
    align-self: center;
    color: #fff;
    flex: 1 1 auto;
  }

  .price {
    font-size: 24px;
    line-height: 29px;
  }

  .period {
    font-size: 10px;
    line-height: 12px;
    margin-top: 6px;
    text-transform: uppercase;
  }
}

0 个答案:

没有答案