Search code examples
cssinternet-explorer-8jstreebackground-size

How can I get a IE8-compliant css theme for JSTree?

I have researched a lot regarding why my JSTree is renderering really badly in IE8, while working perfectly in Chrome. At least one of the problems is IE8's lack of support for the css-property background-size. I am using custom icons to represent folders and files. Each line in the tree structure has a height of 24px in IE8 , when it is 40 in chrome. The latter browser calculates the line height, by automatically wrapping around the icon size, using background-size: auto;. IE8 does not.

I've tried to implement lots of different solutions to make up for IE8's lacking functionality, like:

How do I make background-size work in IE?

IE 8: background-size fix

and the linked-to https://github.com/louisremi/background-size-polyfill

However, due to the complexity of the jstree, and it's default css-files, I am having a really hard time implementing any of these solutions into the existing code, as I am lacking the experience to fully understand the structure of the default.css.

What would be the correct course of action to make this work? I've also searched for compatible .css files for IE8, but found nothing.

An answer which confirms my fears of having to create my own .css from scratch, and understanding it completely, would also be very welcome. However, I would love a second opinion, before I invest the time to do that.

EDIT: These are screenshots from my current situation:

Chrome has nice spacing, and visible chevron/arrows/expanding icons. Also, the font works.

Chrome

IE8 has no auto-size, which makes the height 24px instead of 40px. Ive tried manually setting them to 40, but no luck. The lack of visual finesse does not bother me too much, but the lack of the arrow expanding icons are vital to my application's usability.

IE8

Working edits of the current theme, will be accepted as an answer. So will link to alternative themes that are compliant with IE8. Or anything that helps me understand how to fix the problem myself.

Solution

  • The best way is create a separate style sheet for IE8

     <!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
 <![endif]-->

    there are many other things like in page like you need to add meta tag

     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    and one more thing please post some of your code in a fiddle so that we can better trace the actual cause of problem.

    Update:

    also check after adding this fix..

     <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
 <![endif]-->

    I hope this will add something positive.

    Update:

    After checking jsTree Demo I can conclude one more problem the jQuery Version.

    If you are using jQuery v1.10.1 or later. that jQuery does not have support from older browsers like IE8 for that one must use v.1.9.1 which is the last version which supports IE8.