Internet Explorer 7中的Fancybox / JQuery

Question

We are using FancyBox 2.0/JQuery 1.7 in Internet Explorer 7 on http://www.tuxx.nl/spelling/werkwoorden/#print . When you click the 'Feedback' button at the bottom, you will see a popup box with scrollbars in it. How can we make it look like as it look like in Chrome?

Answer 1

Try set scrolling property to false. I found a answered question like yours, check it out jQuery - Fancybox: But I don't want scrollbars!

Answer 2

Can be done in two steps:
1) Set scrolling property to false
2) Add the following somewhere in your code, AFTER any CSS setting your .wrapper class

<!--[if lt IE 8]>
<style type="text/css">#feedback_form .wrapper { height:362px; width:500px; }</style>
<![endif]-->

The way Fancybox sets the size of it's self according the the size of it's contents. In older versions of IE $().width() and height can return the wrong values, because it does not account for margin/padding, or some other reason. I use to know what the reason was, but I forgot. The main point is that it's broken in older IE's, so you need to set the width/height to something big enough for it to display right.

You can test this with $('#feedback_form .wrapper').css({'height':'362px','width':'500px'}); somewhere in Javascript, as a proof of concept. I've personally tested it in IE9 compatibility mode, using the console before clicking the "feeback" button.