相关疑难解决方法(0)

我正在使用带有背景图像的透明1x1图像,以便能够使用精灵并仍然为某些图标提供替代文本.

我想为图像使用数据URI来减少HTTP请求的数量,但是生成透明图像的最小可能字符串是什么？

我意识到我可以使用数据URI:s来表示实际图像而不是精灵,但是当所有内容都保存在CSS中而不是分散时,它更容易维护.

我试图摆脱Chrome和IE9中每个图像显示的细边框.我有这个CSS:

outline: none;
border: none;

使用jQuery,我还在border=0每个图像标记上添加了一个属性.但是图像中显示的边框仍然出现.有解决方案吗

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}

<h1>Dashboard <img class="icon" border="0"></h1>

参见附页截图:

在桌面 Webkit 上，我的图像显示正常，没有任何问题。在移动 Webkit（例如 iPad iOS 5）上查看时，会出现明显的白色边框。我使用 background-image 和 background-size 因为我的元素有一个固定的比例，但图像源本身可以是任何随机比例。

JSFiddle：

http://jsfiddle.net/tokyotech/A2zAv/

HTML：

<img />

CSS：

body {
    background: #666; }

img {
    width: 8em;
    height: 8em;
    display: block;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1),
        0 1px 0 rgba(0,0,0,0.5) inset;
    background-size: cover;    
    border-radius: 0.4em;
    background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg); 
}