移动端页面中使用CSS画三角形方向箭头中遇到的问题

如标题所述，遇到这个兼容性问题。情景如下：

左边箭头

　　html：<a href="#" class="orange-left"><span></span></a>

　　css：

.orange-left span{
    width:0px;
    height:0px;
    border:7px solid;
    border-color:transparent #e27c03 transparent transparent;
    font-size:0px;
    line-height:0px;
}

 

右边箭头

　　html:<a href="#" class="orange-right"></a>

　　css:

.orange-right:after{
    content:"";
    display: block;
    position:absolute;
    top:50%;
    margin-top:-7px;
    margin-left:-3px;
    left:50%;
    border:7px solid;
    border-color:transparent transparent transparent #e27c03;
}

 

在以上情况中，如果符合标准的话，则左右箭头将都会正常显示。事实上，经测试在QQ5.0.1.660版本、猎豹2.5.0以及android4.1.2自带浏览器中都能表现正常，如上图所示。但是，在UC浏览器9.5版本中却出现问题：如下图所示：