CSS变换porperty Safari浏览器

Question

我试图让下面的输出（两个数字之间有很大的斜杠线）：

下面的代码工作的Firefox和Chrome，但在Safari上是行不通的。会有什么解决方法吗？

下面的代码：

HTML：

<div class="wrap"> 
    <div class="top">4</div> 
    <div class="bottom">15</div> 
</div> 

CSS：

.top { 
    display: block; 
    float: left; 
    font-size: 60px; 
    font-weight: 700; 
} 

.bottom { 
    display: block; 
    float: left; 
    font-size: 38px; 
    font-weight: 700; 
    margin-top: 70px; 
    position: relative; 
    width: 28px; 
} 

.bottom:before { 
    border-left: 1px solid; 
    content: ""; 
    height: 66px; 
    position: absolute; 
    right: 0; 
    top: -35px; 
    transform: skew(-45deg); 
    transform-origin: left top 0; 
    width: 0; 
} 

的jsfiddle演示： http://jsfiddle.net/pg4sxrc1/

个

Answer 1

Safari浏览器的某些版本仍然需要transform和transform-origin使用-webkit-前缀，尝试添加以下定义你的.bottom:before CSS：

-webkit-transform: skew(-45deg); 
-webkit-transform-origin: left top 0; 

jsFiddle Demo