开发者

CSS3 PIE Not Scaling Background Images In IE

I have PIE on my site so that IE can do border-radius, drop-shadow, etc. All was well until I decided to make the site load a little quicker by converting the common background images into a sprite and positioning them with CSS. This works fine until you zoom in in IE. Whilst the div, border-radius and drop shadow resize nicely, the background image doesn't scale and ends up showing the other sprite images.

Does anyone know how to sort out PIE (ei开发者_如何学JAVAther by css or messing with the behaviour) so that it behaves nicely in IE when a user changes the page zoom?


Not ideal, but have resorted to removing the behavior attribute from every element using javascript:

<!--[if ie]>
<script type="text/javascript">
function removeBehavior()
{
  if((screen.deviceXDPI / screen.logicalXDPI) != '1')
  {
    $("*").each(function(){
      $(this).css("behavior", "none");
    });
  }
}
removeBehavior();
window.onresize = removeBehavior;
</script>
<[endif]-->

The function will only run in IE - what it does is check the screen size. If it is not 1 (equals 100%) then (using jQuery) go through the entire dom and remove the behavior attribute (or at the very least set it as an empty value).

I then call the function on the first page call and add it to the onresize event in case the user changes the zoom whilst viewing the page.

It's not ideal but it works.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜