如何使flex和svg在safari和IE11中工作

我有一个简单的功能区横幅，我正在尝试使用，并且我在Chrome中使用它，但不使用Safari或IE11。如何使flex和svg在safari和IE11中工作

HTML：

<div class="container"> 
    <span class="text" style="">Sale <br/>20% off</span> 
    <span> 
    <svg height="100%" 
     viewBox="0 0 4 24"> 
     <path d="M0 0 L 4 0 L 0 12 L 4 24 L 0 24 Z" fill="#6e3ba1" /> 
    </svg> 
    </span> 
</div>

CSS：

.text { 
    padding: 10px 20px; 
    background-color: #6e3ba1; 
    color: white; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 4rem; 
    border-top-left-radius: 0.2rem; 
    border-bottom-left-radius: 0.2rem; 
} 

.container { 
    flex-direction: row; 
    display:flex; 
    flex-wrap: no-wrap; 
    justify-content: flex-start; 
    align-items: stretch 
}

当我试图在这个IE11，我得到的文本和SVG之间有很大的差距。

当我在Safari中尝试这个时，SVG没有出现，因为宽度被赋值为0（而不是基于高度进行缩放）。

奖金：

如果可能的话，我也很想去圆右侧（SVG）的角落。

来源

2017-06-16 Rob Brander

新增固定高度的容器。我修改了你的风格，试试这个，让我知道谢谢。 ------------------.container {0} {0} {0} {0} flex-direction：row; display：flex; flex-wrap：no-wrap; justify-content：flex-start; align-items：stretch; height：180px; } svg {margin：margin-left：-1px; } –

并且还为所有flex属性使用供应商前缀，即-webkit-flex-wrap：wrap;显示：-webkit-FLEX; –

（可选）您可以在没有SVG的情况下使用伪元素和transform: skew() .. ..并且在右侧也有圆角......并且可以在IE11中工作，并且在Safari中可以正常工作无法检查，因为我不喜欢苹果 :)

.text { 
 
    position: relative; 
 
    padding: 10px 20px; 
 
    background-color: #6e3ba1; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    font-size: 4rem; 
 
    border-top-left-radius: 0.2rem; 
 
    border-bottom-left-radius: 0.2rem; 
 
} 
 

 
.text::before, .text::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    width: 30px; 
 
    height: 52%; 
 
    transform-origin: left top; 
 
    background-color: inherit; 
 
    border-top-right-radius: 0.2rem; 
 
    transform: skew(-18deg) 
 
} 
 
.text::after { 
 
    top: auto; 
 
    bottom: 0; 
 
    border-bottom-right-radius: 0.2rem; 
 
    transform-origin: right bottom; 
 
    transform: skew(18deg) 
 
} 
 

 
.container { 
 
    flex-direction: row; 
 
    display:flex; 
 
    flex-wrap: no-wrap; 
 
    justify-content: flex-start; 
 
    align-items: stretch 
 
}

<div class="container"> 
 
    <span class="text" style="">Sale! <br/>20% Off</span> 
 
</div>

来源

2017-06-16 21:26:30 LGSon

如何使flex和svg在safari和IE11中工作

回答

相关问题