I’m using FullCalendar JS on a page. In IE8 there is an issue where all the borders are showing as solid black lines. I have narrowed down the cause to the usage of of the border-style hidden value. I’m a bit confused though because IE8 supports the the border-style hidden value. Its seems though as if there is a bug or something in IE8 that results in a solid black line for border-style hidden on table elements or something. Any ideas how to fix this without removing/changing the border-style value?
If you view that in IE8 via modern.ie or whatever you will see what I mean.
I created a ticket/issue but really would like to fix this myself for a project I’m working on without resorting to graceful degradation… as an excuse. Although I will…
This problem has nothing to do with JavaScript. It is caused by the border-style hidden value. I just don’t understand why it is happening because IE8 supports border-style hidden. If you look at the full calendar css file and search for border-style hidden you will see what I mean. Again… nothing to do with JavaScript.
I am away on holiday on a mac laptop so have no way to test but I assume you have tried explicitly setting the border-color of the cells to the colour you want rather than letting them take it from the default?
If that doesn’t work then I would consider using border-collapse: separate with border-spacing:0 and then only style the right and bottom borders of the cell.
Of course that may be a lot of work for a browser that is almost extinct now and if the only problem is the border then I wouldn’t worry about it too much.
There are various bugs in IE8 but generally you can play around with different scenarios (as above) and still get the general display you need. In the end it becomes a matter of trial and error. I have forgotten most of my IE8 hacks as I don’t support it these days so there may indeed be a better fix.