css三角形：之前在Safari（iPad）上关闭1px

Question

我很抱歉，如果这应该更明显，但我花了很多时间搜索，似乎无法解决我的问题。

我正在尝试为导航列表获取特定的箭头形状。它在我的电脑上使用firefox和chrome完美运行，但是当我把它带到我的ipad上的safari时，我的：之前的伪元素和链接的背景之间有一个1px的空间。有没有办法解决这个问题，以便它们在两者上都正确对齐？

<ul id="listnav">
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
</ul>

CSS

#listnav {
list-style-type: none;
float: right;
padding: 0;
margin: 0;
} 

#listnav a:link, a:visited {
display: block;
color: #ffffff;
background-color: #111111;
height: 20px;
width: 220px;
text-align: left;
padding: 3px;
margin:0 15px 5px 10px;
text-decoration: none;
position: relative;
border: none;
}

#listnav a:hover, a:active {
background-color: #462530;
color: #e2d276;
}

#listnav a:before {
content: "";  
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 8px solid #111111;
position: absolute; left: -8px; top: 0;
border-radius: 1px;
padding: 0;
}

#listnav a:hover:before {
border-right-color: #462530;
}

jsfiddle link

感谢您的帮助！