2

这适用于除 IE10 之外的所有浏览器。

在隐藏的 div 上使用简单的 jQuery 切换功能时，它会导致底角留下锯齿状的“涂抹”。我以前从未见过这种情况。我想这与border-radius css有关，但我在Firefox或Chrome中对此没有任何问题。有什么想法吗？这是一个 IE 10 错误还是我在做一些愚蠢的事情？

IE10 错误

这是JSFiddle的链接

HTML：

<div id="app_cont">

    <div id="game_pnl">

            <div id="hid_div"></div>

            <div id="btn_cont" unselectable="on">
                    <a href="#" id="def_btn" class="app_btns"  unselectable="on">Submit</a>

            </div>

    </div><!--#game_pnl-->

</div><!--#app_cont -->

CSS：

    #app_cont {
    border: 1px solid grey;
    height: auto;
    width: 500px;
    margin: 100px auto 100px auto;
    background: #efefef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-family: Arial;
    font-size: 1.6em;
    padding: 10px;
}


#btn_cont {
    border: 1px solid grey;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #dcdcdc;
    clear: both;
    padding: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app_btns {
    margin: 0px 0px 0px 0px;
    min-width: 90px;
    text-align: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: normal;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ababab;
    padding: 9px 18px;
    text-decoration: none;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ededed),
        color-stop(100%, #dfdfdf) );
    background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%);
    background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    filter: progid :   DXImageTransform.Microsoft.gradient (  
             startColorstr =   '#ededed', endColorstr =   '#dfdfdf' );
    background-color: #ededed;
    color: #777777;
    display: inline-block;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app_btns:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #dfdfdf),
        color-stop(100%, #ededed) );
    background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%);
    background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    filter: progid :   DXImageTransform.Microsoft.gradient (  
             startColorstr =   '#dfdfdf', endColorstr =   '#ededed' );
    background-color: #dfdfdf;
    cursor: pointer;
}

.app_btns:active {
    position: relative;
    top: 1px;
}

#hid_div {
    border: 1px solid grey;
    background: #f1e8ba;
    width: 482px;
    height: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 0px 0px 10px 0px;
    float: left;
    display: none;
    padding: 8px;
    line-height: 20px;
    font-size: 14px;
    color: #313131;
}

jQuery：

$('#def_btn').on('click', function(){

    $('#hid_div').slideToggle(250);

});
4

1 回答 1

2

马特，

From what I've tested on your JSFiddle code, this is a bug in Internet Explorer 10. What appears to be happening is that IE10 does as your JavaScript code says and slides the element out. However, it does so in a way that it does not initiate a redraw of the parent of the parent element at each frame of the animation, which causes the current frame to be drawn on top of the previous frame, thus giving it the jagged look. Basically, it doesn't erase the previous frame of the element with id app_cont and it draws over it after changing the css properties of the child element hid_div to make it appear to be sliding out. I would imagine that this would be discovered by Microsoft soon and fixed in some sort of update for IE10.

However, in case it isn't fixed any time soon, the best workaround to fix this (in my opinion) would be to not use Jquery for sliding out the element and instead make your own "raw" JavaScript function to increment the height property over a certain period of time. Below are links to two Youtube videos that do what I suggested, and after trying the code in IE10, it seemed to be working fine -- meaning no jagged edges. I would suggest watching both so you get a thorough understanding of this concept.

I tried to post the code from the two Youtube tutorials on JSFiddle, but for some reason it didn't work (but I tested it out for real with IE10 and it worked fine). The source code for the tutorials is available in the descriptions for the videos.

但是，您必须做的一件事是同时更改两个元素的高度；第一个是带有 id 的 div，hid_div第二个元素是带有 id 的父 div app_cont。但是，如果您能够彻底理解这些教程，那么它根本不应该具有挑战性。您必须更改app_contdiv 高度的原因是因为这将强制为该元素重新绘制每一帧，从而消除锯齿状边缘。

淡化教程

滑出教程

谢谢你的提问，tcs08

于 2013-07-03T22:30:59.770 回答