缩放导致CSS div之间的差距

时间:2014-03-06 23:20:33

标签: css internet-explorer firefox cross-browser gaps-in-visuals

我在div中创建了具有background-image属性的边框,并且transform:pattern的scale在页面上居中。在chroMe中它工作正常,但在Firefox和IE中它有差距。

如何消除轮廓?

火狐 Firefox

Internet Explorer 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; }

0 个答案:

没有答案