On November 18 I got a message on Facebook by a web developer who was using the jQuery FlexSlider plugin on one of his projects. The slider worked greatly on all browsers except IE 8 and 9. In IE the slider's container didn't adjust its height to fit the slider's height. I decided to run further tests.
I first wrote the following answer:
None of the slider's containers has a stated height. Try to specify an height on these elements only for IE.
It didn't work. It may seem odd, but the nature of the problem in IE hinges on the way this browser handles floated elements. FlexSlider uses floating but without specifying dimensions on elements (hence its name, which means flexible).
It's evident that the problem cannot be solved via CSS and conditional comments. FlexSlider uses only the overflow and float properties to wrap and contain floats. But IE seems to behave differently.
The problem lies in the jQuery manipulation of the slider and slides dimensions performed by this plugin. FlexSlider has several methods that affect the CSS layout of the slider's elements. But these methods are not reliable because they apparently fall in the grey zone between the CSS standard and the JavaScript standard.
This dark area has been never investigated. I can't say that we're facing another IE's bug because we should reduce the singular case to a minimum test case, both with or without jQuery and JavaScript.
Then we should dissect the plugin and test it without the default style sheet just to be sure. As previously stated, the combination of JavaScript and CSS when defining element's styles have been never tested officially by the W3C.
Perhaps a solution to the problem would be an explicit statement when the slider's images have finished loading:
$('img', 'div.flexslider').on('load', function() {
var $img = $(this),
imgHeight = $img.outerHeight();
$img.parent().height(imgHeight);
});
Here I'm assuming that all the images have the same height. However, you should modify the plugin's core to add this routine because FlexSlider doesn't feature public methods.
