html - Overflow & border-radius : PIE not working -


i can't border-radius property work on ie8, pie.

what trying ?

a progress bar

how ?

a parent div round border (border-radius: 15px) , grey background. child div (rectangular) green background. child corners should hidden outside of parent shape (overflow:hidden).

problem :

on ie8, parent shape has round corners child div has not (you can same result on other browser removing overflow: hidden)

why solution "overflow:hidden rounded borders using css3pie in ie8?" not answer problem ?

i don't want child div have round corners, instance @ 61% (see jsfiddle), right side of green shape rectangular. (i don't want add border-radius property on it)

code & demo ?

jsfiddle : link

html :

<div class="container">     <div class="progress" style="width:61%"></div> </div> 

css :

.container {     width: 200px;     height: 30px;     border: solid 1px black;     position: relative;     background: #aaa;     border-radius: 15px;     behavior: url(/content/pie.htc);     /* remove see result on ie8 : */     overflow:hidden; }  .progress {     height: 100%;     background: #5f5; } 

does has idea deal ?


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -