css - スケーリングにより、CSS div 間にギャップが生じる

Question

div で background-image プロパティを使用して境界線を作成し、変換します。パターンのスケールはページの中央に配置されます。chroMe では正常に動作しますが、Firefox と IE ではギャップがあります。

輪郭をなくすにはどうすればよいですか？

ファイアフォックス

インターネットエクスプローラ

私のHTMLコード:

<div class="row ft_copyright">
    <div class="container-fluid rebordo rebordo_cr">
        <div class="rebordo_l rebordo_copyright"></div>
        <div class="rebordo_r rebordo_copyright"></div> 
    </div>

    <div class="container-fluid back_ft_cr">
        <p class="copyright">Copyright</p>
    </div>
</div>

私のCSSコード:

.ft_copyright { height: 33px; margin-top: -20px;}
.rebordo_copyright {background: url('assets/images/rebordo.png') 0px -20px repeat-x;}
.back_ft_cr {height: 76px; background: #848484; text-align: center; }
/*rebordos*/
.rebordo {height: 20px; margin-top: 0px; }
.rebordo_l { width: 50%; height: 20px; float: left; background-size: 68px 20px;   background-repeat: repeat-x; outline: 0; /* flip background vertically */ -webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); -ms-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
.rebordo_r {width: 50%; height: 20px; float: right;  background-size: 68px 20px; background-repeat: repeat-x; outline: 0; }