当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Edges of containing div appear when using css animation in IE

问题描述:

I'm working on a loading spinner which uses a white + transparent image and a background color to color the spinner according to the user's color scheme.

I put together a mock-up (which includes a speed adjuster, 2 sizes, and several color options), and it looks great. Except on IE!

IE 11 renders the edges of the containing div at < 1 pixel but > 0 pixels. It's a bug in IE, and I can't rely on Microsoft to fix it in the next two weeks, so I need a workaround.

How can I get these unsightly lines to disappear?

So far I've tried setting the background-color on the img instead of the div containing it, but the same thing happens. I could try doing something with a second image and z-indexes, but I'd really like to just keep it to an html + css fix, and preferably not a nasty IE-specific 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/

网友答案:

My solution was not what I'd call ideal, but it works. So if you have a better solution, I'll gladly give you the Accept points!

I modified the image to be 37x37px instead of 35x35px, with the outermost pixels being white.

I added a margin--top and -left of -1px to the image's css.

I set the div wrapping the image to be height & width 35px.

This causes the edge of the image to extend beyond the color div by 1 pixel on all four sides, effectively covering IE's rendering mistake.

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

css changes:

.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 changes:

<img src="http://i.imgur.com/2iPifF0.png" height="37" width="37"/>
分享给朋友:
您可能感兴趣的文章:
随机阅读: