html - IE中使用css动画时出现包含div的边缘

Question

我正在开发一个加载微调器，它使用白色 + 透明图像和背景颜色根据用户的配色方案为微调器着色。

我制作了一个模型(其中包括一个速度调节器、2 种尺寸和多种颜色选项)，它看起来很棒。除了在 IE 上!

IE 11 在 < 1 像素但 > 0 像素处呈现包含 div 的边缘。这是 IE 中的错误，我不能指望 Microsoft 在接下来的两周内修复它，因此我需要一个解决方法。

如何让这些难看的线条消失？

到目前为止，我已经尝试在 img 而不是包含它的 div 上设置背景颜色，但同样的事情发生了。我可以尝试使用第二张图片和 z-indexes 做一些事情，但我真的很想将其保留为 html + css 修复，最好不要使用讨厌的 IE 特定的 css hack。

CSS:

div.loading-text {
    margin-left: 20px;
    display: inline-block;
    /*font-weight: bold;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

div.loading-box {
    margin: 40px 20px 10px 20px;
    border: solid 2px #999;
    padding: 30px;
}

div.spinner-wrapper {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
}

div.spinner {
    -webkit-animation:spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}

div.loading-box {
    width: 195px;
}

div.loading-box .spinner {
    width: 35px;
    height: 35px;
}

html:

<div class="loading-box">
    <div class="spinner-wrapper">
        <div class="spinner">
            <img src="http://i.imgur.com/vNGu85p.png" height="35" width="35"/>
        </div>
    </div>
    <div class="loading-text">Loading your data . . .</div>
</div>

http://jsfiddle.net/cwm7dmhv/10/

Answer 1

我的解决方案并不理想，但它确实有效。所以如果你有更好的解决方案，我很乐意给你 Accept 分!

我将图像修改为 37x37px 而不是 35x35px，最外层的像素为白色。

我在图像的 css 中添加了 -1px 的 margin--top 和 -left。

我将包裹图像的 div 设置为高和宽 35px。

这会导致图像的边缘在所有四个边上都超出颜色 div 1 个像素，从而有效地覆盖了 IE 的渲染错误。

jsfiddle:http://jsfiddle.net/cwm7dmhv/13/

CSS 更改:

.spinner img {
    margin-left: -1px;
    margin-top: -1px;
}
div.spinner-wrapper {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    width: 37px;
    height: 37px;
    padding-left: 2px;
    padding-top: 2px;
}

html 更改:

<img src="http://i.imgur.com/2iPifF0.png" height="37" width="37"/>