
border-image impossible works good in ie9
Hi! I'm trying use pie for ie9 but it doesn't work. I've tested ALL known iusses but it doesn't work.
I've tested:
fill stretch
PIE.php otherwise PIE.htc
z-index
position: relative
PIE-2.0 BETA
Add Pie.js to my html code
Change permissions to my PIE files from 644 to 744
The code is:
Code:
.contenido-ppal {
display: -moz-box;
display: -webkit-box;
display: -o-box;
display: -ms-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
-o-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal;
-moz-box-direction: reverse;
-webkit-box-direction: reverse;
-o-box-direction: reverse;
-ms-box-direction: reverse;
box-direction: reverse;
width: 99.99%;
}
/** CONTENIDO TEXTO **/
.contenido-texto {
-moz-box-flex: 1;
-o-box-flex: 1;
-webkit-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
margin: 0.938em;
letter-spacing: -0.015em;
padding-left: 0.938em;
padding-right: 1.250em;
padding-top: 0.938em;
padding-bottom: 0.938em;
border-radius: 0.625em;
border-style: solid;
border-width: 0 0 0 1.875em;
[color=#BF0000]-webkit-border-image: url(../images/Imagfondo/gusanillo.png) 0 0 0 30 repeat;
-moz-border-image: url(../images/Imagfondo/gusanillo.png) 0 0 0 30 repeat;
-o-border-image: url(../images/Imagfondo/gusanillo.png) 0 0 0 30 repeat;
/*-ms-border-image: url(../images/Imagfondo/gusanillo.png) 0 0 0 30 repeat;*/
border-image: url(../images/Imagfondo/gusanillo.png) 0 0 0 30 repeat;
behavior: url(PIE.php);[/color]
/*-webkit-border-radius: 0.625em;
-moz-border-radius: 0.625em;
-ms-border-radius: 0.625em;*/
background: #fcf59b;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#81cbbc),
color-stop(2%, #fcf59b)
);
background:
-moz-repeating-linear-gradient(
top,
#fcf59b,
#fcf59b 2.375em,
#81cbbc 2.5em
);
background:
-o-linear-gradient(
top,
#fcf59b,
#fcf59b 2.375em,
#81cbbc 2.5em
);
background:
-ms-linear-gradient(
top,
#fcf59b,
#fcf59b 2.375em,
#81cbbc 2.5em
);
background:
-ms-repeating-linear-gradient(
top,
#fcf59b,
#fcf59b 2.375em,
#81cbbc 2.5em
);
background:
repeating-linear-gradient(
top,
#fcf59b,
#fcf59b 2.375em,
#81cbbc 2.5em
);
-webkit-background-size: 100% 2.5em;
-moz-background-size: 100% 2.5em;
-ms-background-size: 100% 2.5em;
background-size: 100% 2.5em;
-webkit-box-shadow: 0 0.125em 0.625em 0.0625em rgba(0,0,0,.2);
-moz-box-shadow: 0 0.125em 0.625em 0.0625em rgba(0,0,0,.2);
-ms-box-shadow: 0 0.125em 0.625em 0.0625em rgba(0,0,0,.2);
box-shadow: 0 0.125em 0.625em 0.0625em rgba(0,0,0,.2);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
-o-background-clip: padding-box;
-ms-background-clip: padding-box;
background-clip: padding-box;
}
I need repeat option, because the image is small and it must redraw time after time in dinamically way.