IE8 + pie.htc: adding html5shiv.js destroys rounded corners again

Question

OK, everything works fine in any other browser, than IE8. I've connected pie.htc to fix the problems with rounded corners for IE8. Everything works fine. Then I've found some problems with html5 for IE8. That's why I used html5shiv.js. Now everything is fine, but SOME rounded corners became squared again. It happened within only one div.

All the rest rounded corners still look good in IE8 with pie.htc + html5shiv.js. I mean html5shiv.js didn't break'em.

What I've tried to solve the problem with that corners, but with no luck: I moved

<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->

up before css loads. Also, I put !important just to be sure at .superclass{ behavior: url(/PIE.htc); position:relative!important; } which was used to fix IE8 rounded corners for that superclass.

Also, I tried to add using most combinations of 3 strings that are below:

  z-index: 1;
  *position:relative!important;
  *z-index: 1;

but nothing helps. What else could be done? Once I remove

<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->

the corners are rounded again. Any ideas? Thank you.

using `!important` with CSS3Pie is a recipe for pain. CSS3Pie adds its own markup to do its effects and changes the styles of the original element; an `!important` flag on any of the styles it works with will break it. That includes the `position` style. — SDC, Nov 13 '12 at 12:37
OK, thank you, I removed !important. position:relative; and the html5shiv.js is above css file. Still no luck. — Haradzieniec, Nov 13 '12 at 12:41
have you tried the old `zoom:1` hack to force IE's hasLayout flag for the element? that often solves these issues with CSS3Pie. But can't really be sure without seeing your code in action. Any chance of a link to a demo page? — SDC, Nov 13 '12 at 13:14
Thank you, just tried zoom:1; , still no luck. Sorry I can't share the code, it is on the local host and I have no permissions to share it. Still working on that. I will post the solution if I find it. Thank you. — Haradzieniec, Nov 13 '12 at 13:32

score 1 · Accepted Answer · edited May 23 '17 at 10:29

Use conditional comments and the HTML/CSS solution to create rounded corners:

 <div class="container">
   <b class="rtop">
      <b class="r1"></b>
      <b class="r2"></b>
      <b class="r3"></b>
      <b class="r4"></b>
   </b>
     CONTENTS GOES HERE
   <b class="rbottom">
     <b class="r4"></b>
     <b class="r3"></b>
     <b class="r2"></b>
     <b class="r1"></b>
   </b>
 </div>

References:

IE8 + pie.htc: adding html5shiv.js destroys rounded corners again

1 Answers1