Android上的SVG错误

目前正在开发一个网站，在我测试的每个浏览器中都能正常工作。它只能在三星Galaxy Note平板电脑运行的标准浏览器中工作。这是问题的屏幕截图：

付款方式会无缘无故地获得边距/填充/行高。不知道出了什么问题。你可以看到这里应该是什么样子：

谢谢大家

html：

<ul class="payment">
    <li data-tooltip="" aria-haspopup="true" class="has-tip" data-selector="tooltip-idfx8fp00" aria-describedby="tooltip-idfx8fp00" title="">
        <img src="#">
    </li>
    <li data-tooltip="" aria-haspopup="true" class="has-tip" data-selector="tooltip-idfx8fp01" aria-describedby="tooltip-idfx8fp01" title="">
        <img src="#">
    </li>
    <li data-tooltip="" aria-haspopup="true" class="has-tip" data-selector="tooltip-idfx8fp02" aria-describedby="tooltip-idfx8fp02" title="">
         <img src="#">
     </li>
     <li data-tooltip="" aria-haspopup="true" class="has-tip" data-selector="tooltip-idfx8fp03" aria-describedby="tooltip-idfx8fp03" title="">
         <img src="#">
     </li>
</ul>

.pageFooter .top ul {
    margin: 0 0 1.875rem 0;
    display: none;
}
@media only screen and (min-width:800px) {
    .pageFooter .top ul {
        display: block;
    }
}
.pageFooter .top ul.payment li {
    float: left;
    width: 1.875rem;
    margin: 0 0.9375rem 0 0;
    opacity: 0.65;
    -webkit-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.pageFooter .top ul.payment li:hover {
    opacity: 1; 
}
@media only screen and (min-width:800px) {
    .pageFooter .top ul.payment li {
        width: 25%;
        padding: 0 0.9375rem 0 0;
        margin: 0; 
    } 
}
.pageFooter .top ul.payment li img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    vertical-align: top; 
}