3

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.

Community
  • 1
  • 1
jumps4fun
  • 3,994
  • 10
  • 50
  • 96

2 Answers2

3

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.

MarmiK
  • 5,639
  • 6
  • 40
  • 49
  • I'm aware of the need for meta tags, to ensure IE does not go into compatibility mode, where it get's even worse than it normally is. JSFiddle does not work with IE8 either, so that will be redundant. Regarding creating a seperate style sheet for IE8, well that is an option, but it would be very time consuming to do so from scratch, and I would prefer to use a pre made theme that works. Which is kinda what my question is all about. The default JSTree theme is available here. As previously stated, the css is not compatible with IE8, at least because of the background-size property. – jumps4fun Jul 17 '14 at 12:54
  • I have updated one more easy way out please see if that helps.. add this after all js is added in your page. in some cases this works like charm let see what happens in your case :) – MarmiK Jul 17 '14 at 13:02
  • Thank you very much for making an effort to help me. As I am at work right now, I have been set to look at another task for the moment, but I'll get back as soon as possible. ;) – jumps4fun Jul 17 '14 at 13:16
  • I ended up having to make a pretty harsh work-around, where I edited my css and hardcoded it to fit into my needs. Feels kinda like forcing a square brick into a star-shaped hole. But thanks for the effort you have put into this. I have definitely learned a few new tricks that will help me in the future. – jumps4fun Jul 23 '14 at 07:49
  • 1
    I am happy that some tricks are useful to you :) Surely that trick will help or else there are many (including me) on stackoverflow who are happy to help :) – MarmiK Jul 24 '14 at 09:36
0

Try respond.js which made your ie8 browser to compatible for css3 pseudo elements and other stuff.

https://github.com/scottjehl/Respond/tree/master/src

mahendra rajeshirke
  • 122
  • 8