Css旋转在ie9中留下一条线

Question

我想要一个显示为语音气泡的链接，并且气泡的提示是旋转并定位以适合的图像。在IE9中，在我旋转它们时，在提示的错误一侧（见图像）上留下了一些线条。我能以某种方式摆脱这些界限吗？

<a class="Bubble Red S  " href="">
<span class="fs20 tac db">Jag söker bostad</span>

.Bubble {
    position: relative;
    display: block;
    .border-radius(1.6rem);
    text-decoration: none !important;
    &:after {
        content: "";
        position: absolute;
        top: -27px;
        left: 50%;
        z-index: 1;
        width: 34px;
        height: 28px;
        overflow: hidden;
        background-image: url( "../media/bubble-tip.png" );
    }
     &.S {
        margin: 0 0 2.7rem 0;
        &:after {
            width: 34px;
            height: 25px;
            .transform( ~"rotate(180deg)" );
            bottom: -27px;
            top: auto;
        }
    }
}