开发者

jQuery Click event not working with Fancybox call in IE

开发者 https://www.devze.com 2023-02-18 15:07 出处:网络
Ok so this is a HUGE problem. The site I am building relies on Fancybox and it has to be IE compatible.... I just came to learn that when clicking on a div that launches a fancybox (in safari and fire

Ok so this is a HUGE problem. The site I am building relies on Fancybox and it has to be IE compatible.... I just came to learn that when clicking on a div that launches a fancybox (in safari and firefox) it does not come up in IE 7 (IE 8 seems to be working). My script looks like this:

jQuery(document).ready(function() {
    $(".students_button").click(function(){
        $.fancybox(
            '<p>HTML content here</p>',
            {
                'autoDimensions'    : false,
                'width'             : 600,
                'height'            : 'auto',
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade'
            }
        );
    });
});

My CSS for the button appears as so:

#content #home #buttons {
  width: 310px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#content #home #buttons #button {
  display: block;
  height: 70px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  background: #3a79f7 url(/images/blue_button_bg.png) repeat-x;
  filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d7cfa', endColorstr='#2463e1')");
  background: -webkit-gradient(linear, left top, left bottom, from(#3d7cfa), to(#2463e1));
  background: -moz-linear-gradient(top, #3d7cfa, #2463e1);
  pointer: han开发者_StackOverflow中文版d;
  margin-bottom: 10px;
}
#content #home #buttons #button #text {
  color: #ffffff;
  font-size: 22pt;
  text-align: center;
  position: relative;
  top: 13px;
  z-index: 1000;
}

And finally, my HTML is this:

<div id="content">
   <div id="home">
    <div id="buttons">
        <div id="button">
            <div id="text" class="students_button">Students</div>
        </div>
    </div>
   </div>
</div>

If it matters, I'm using a bit of IE specific CSS to call as border-radius hack:

#content {
    #home {
        #buttons {
            #button {
                behavior: url(/border-radius.htc);
            }
        }
    }
}

The border-radius.htc file can be located here. I am using jQuery 1.5.1 and Fancybox 1.3.4 if it matters.

Thank you for any help you can provide in fixing this!


I copied and pasted your code, and it worked as expected in IE7 and IE8. But, it did not work when IE was in Quirks mode. Is it possible IE is loading the page in quirks mode? If you don't know, you can find out by hitting F12 to open IE Developer Tools and looking in the Document Mode field.

If that is the problem, you can prevent IE from opening in Quirks mode by using a valid DocType. Try adding this to the top of your html document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hope that works!

0

精彩评论

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