html - 带背景颜色的图像上出现边框线

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 Version 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