移动safari渲染按钮带边框

Question

我有一组按钮，它们在移动游猎中呈现奇怪的效果。每个人周围都有不平的边框。

这就是它们在移动设备上的显示方式，以下是它们在其他所有浏览器中的显示方式。

我对按钮的代码是：

        <div id="buttonbox">
    <div id="button1" class="buttons"><a href="one/two-wrong.html?">2 CHOICE1</a></div>
    <div id="button2" class="buttons"><a href="one/two-wrong.html?">2 CHOICE2</a></div>
    <div id="button3" class="buttons"><a href="one/two-right.html?">2 CHOICE3</a></div>
    <div id="button4" class="buttons"><a href="one/two-wrong.html?">2 CHOICE4</a></div>
</div>

   #buttonbox{
    position:relative; 
    top:500px;           
    padding:40px;
    }

    .buttons a{
    color:black;
    text-decoration:none;   
    }

    .buttons, .buttons:active, .buttons:focus{
     border:none;
    outline:none;

    }

    .buttons{
    background-color:#aaa;
    outline:none;
    border:none;
    width:100px;
    padding:5px;
    opacity:0;   


    animation: buttonFade;
    animation-iteration-count: once;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay:2s;


    -webkit-animation-name: buttonFade;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay:2s; 
    }

    @keyframes buttonFade {
    from {opacity: 0;}
    to {opacity: 1;}
    }
    @-webkit-keyframes buttonFade {
    from {opacity: 0;}
    to {opacity: 1;}
    }

我不确定是否有办法绕过这个，因为它似乎是一个旅行问题，但我真的很感激任何建议！