I have decided to stick with love. Hate is too great a burden to bear.
– Martin Luther King, Jr.
Problem:
I was given a task to make the corners of a div area to be rounded. I knew that only IE 9 supported this out of the IE family, but I didn’t expect it to be hampered by a -moz-border-radius or jquery.curvycorners.js or jquery.corner.js.
- -moz-border-radius caused the top and bottom inner border to be smaller.
- jquery.curvycorners.js caused the corners to look like a square got cut out.
- The jquery.corner.js made the rounded corner, but you could still see the original square corner (ie it wasn’t transparent).
Solution:
After a lot of trial and error with the multiple ways of trying to get a corner in IE, I found a blog that showed the following code. Actually I found this blog first and tried this, but for one reason or another it didn’t work until many failures later:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
Stupid IE caching! I thought I had the solution which was to add the meta tag, but apparently after no code change and a restart of IE, the square corner has come back. So the new solution is to not run the curvycorner code if it is IE8 and possibly others.