jquery UI button not working in IE 9?

Question

There seems to be some problem with jquery UI buttons in IE 9?

This is how they look normally:

In IE 9 they look like this:

Html of the button is:

        <input
         type="submit"
         name="submit_intermediate_question"
         id="submit-intermediate-question"
         value="Odoslať"
         class="input-submit" >

jquery code:

$(document).ready(function() {

    $('.input-submit').button();

});

Is this a known problem? I am using the latest jquery UI (downloaded yesterday). How to solve it?

Answer 1

The CurvyCorners javascript is interfering with the styles declared by jQueryUI.

CurvyCorners is failing because it still calls scanStyles in IE9 even though IE9 supports border-radius ( Support for "border-radius" in IE ) and I suspect that causes conflicts with the existing styles declared by jQueryUI.

http://code.google.com/p/curvycorners/source/browse/trunk/curvycorners.src.js#93 should be:

this.supportsCorners = this.ieVer >= 9.0;

So download curvycorners.src.js, change that line, and use that instead of your current curvycorners.src.js file and the button styles will display correctly.

Answer 2

Your example is working for me in IE9. Check http://jsfiddle.net/tKksD/4/. Make sure you have jquery-ui.css loaded in your header. Then put both your jQuery.js and jQueryUI.js just before </body> closing tag. And lastly put your jQuery code before </body> and after your jQuery.js and jQueryUi.js scripts.

You can also do this by using:

$('input:button').button();

Check working example at http://jsfiddle.net/tKksD/

Or

<button></button>` instead of `<input type"button" />

Check working example at http://jsfiddle.net/tKksD/