出现在与背景颜色的图象的边界线

Question

我有一些我正在使用background-color的图像 HTML：

<nav id="mainNav">
    <ul id="buttons">
                <li><a href="javascript:;" class="askLink"><img src="https://dl.dropboxusercontent.com/s/tqbyzi5pm97d95m/Message.png"/></a></li>
    </ul>
</nav>

CSS：

 #mainNav {
    opacity: 0.75;
    filter: alpha(opacity=75);
    position: relative;
 }

 #mainNav ul {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
 }

 #mainNav li {
    display: inline;
    margin: 0.3em;
 }

 #mainNav img {
    height: 1.5em;
    background-color: blue;
    border: none;
 }

 #mainNav a:link, #mainNav a:visited, #mainNav a:hover, #mainNav a:active {
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    color: blue;
 }

 #mainNav a.active {
    text-decoration: none;
 }

我的标准设置OS X Safari版本7.0.6（9537.78.2）没有问题，但在iOS 7 Safari中，出现边框线。
例如：和

我可以做些什么来避免这种情况？ 谢谢！

编辑：注意它在图像的其他方面是如何出现的，那是怎么回事？

Answer 1

我真的怀疑你没有正确调整你的 .png 图像的大小/裁剪。

这可能发生的原因是您需要仔细检查.png图片。意思是，在您喜欢的编辑器中再次打开它们，并删除通常出现调整图像大小并将其保存为具有Alpha透明度的png的半透明边框。

还尝试添加到img：

vertical-align: middle;

并确保查看<img> inside <a> gets blue border

Answer 2

虽然我还不确定究竟是什么导致了这个问题，但它可能只是浏览器中罕见的渲染故障。

我使用的解决方案只是用SVG替换使用过的（.png）图像，用CSS替换background-color图像。能够为.svg图像着色。这个代码是CSS：

svg {
  fill: blue;
}

或用currentcolor替换实际颜色，使填充颜色与父元素相同。

Answer 3

尝试将边框样式添加到图像并将其设置为零。

请参阅How remove border around image in css?