PIE.htc and jQuery conflict animation?

I have a series of bullets that will appear in a row. I use jQuery and jQuery UI in bullet animation. The top pool should have rounded corners, which I use to execute CSS and PIE.htc. This works fine in all browsers other than IE, as well as in IE8, but in IE7 the first bullet appears with the background about 80% narrow and about 95% short (or perhaps very shifted in the upper left corner).

Interestingly, if you change the size of the browser window at all, the background will snap into place (and not the bullets in the container with a fixed width, so I don't resize the bullets here). If I comment out the PIE.htc line in my CSS, the bullet will appear correctly, but I need rounded corners. See this image .

The appropriate code follows

Js

$([appripratebullet]).addClass('currentBullet').fadeIn('slow').prev().removeClass('currentBullet', 'slow');

CSS

.bullet
{
 display:none;
 color:#6e6e6e;
 min-height:40px;
 font-size:2.5em;
 line-height:1.5em;
 font-weight:normal;
 position:relative;
 padding:25px 20px;
 margin-top:1px;
 background:#eeeeee;
 border-bottom:1px solid #fff;
}
.bullet.first{
 margin-top:0;
 -moz-border-radius:8px 8px 0 0;
 -webkit-border-radius:8px 8px 0 0;
 border-radius:8px 8px 0 0;
 behavior: url(/Content/PIE.htc);
 }
.bullet.currentBullet{
 background:#d98452;
 color:#fff;
 }
+3
source share
3 answers

http://jquery.malsup.com/corner/

Use this jquery plugin to get around corners in all browsers. No angular images, uses nested dv to draw borders. It is flexible and easy to use. He also added support for the native radius radius, so it only runs on browsers that don't support the reference radius.

+4
source

Try adding a callback to resize after the effect, this should lead to the elements (elements) being redrawn correctly.

$([appripratebullet]).addClass('currentBullet')
                     .fadeIn('slow', 
                             function() {       
                                 if ($.browser.msie) {
                                     $(this).each(function() { $(this).resize(); }); 
                                 }
                             });
+1
source

, , . jquery.corner.js , .

, pie.htc :

function fixButton() {
    if ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && document.all)
        $("body").height("99.9%"); setTimeout(function () { $("body").height("100%"); }, 0);
}
0

Source: https://habr.com/ru/post/1783659/


All Articles