Border radius + gradient = problème sous ie

Bonjour
je viens de créer un gradient avec également un border-radius. La combinaison fonctionne très bien sur : Fire Fox, Safari, chrome, opéra. Seulement sur Internet Explorer, les border-radius ne se voit pas. Est-ce compatible avec Internet Explorer 9 ? Voici ci-dessous le code que j'ai créé :

	color:#fff;
		border-radius:4px 4px 4px 4px;
	-moz-border-radius:4px 4px 4px 4px;
	-webkit-border-radius:4px 4px 4px 4px;
	display:inline-block;
	position:relative;
	font-size:11px;
	line-height:15px;
	padding:5px 7px 4px 9px;
	background: #68b1f1;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY4YjFmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMjcxZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #68b1f1 0%, #2989d8 50%, #207cca 51%, #2271e2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68b1f1), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#2271e2));
background: -webkit-linear-gradient(top,  #68b1f1 0%,#2989d8 50%,#207cca 51%,#2271e2 100%);
background: -o-linear-gradient(top,  #68b1f1 0%,#2989d8 50%,#207cca 51%,#2271e2 100%);
background: -ms-linear-gradient(top,  #68b1f1 0%,#2989d8 50%,#207cca 51%,#2271e2 100%);
background: linear-gradient(to bottom,  #68b1f1 0%,#2989d8 50%,#207cca 51%,#2271e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68b1f1', endColorstr='#2271e2',GradientType=0 );
	border-bottom:1px solid #104773;
	border: none;
	cursor: pointer;

Merci d'avance

Bonsoir,

Il s'agit effectivement d'un problème connu sur IE9 : border-radius et gradient sont très bien supportés séparément, mais leur mariage ne fait vraiment pas bon ménage... Il y a plusieurs solutions connues il me semble, mais pour ma part j'utilise toujours CSS3 PIE qui permet le support simultané des deux propriétés :

CSS3 PIE a écrit :
The rounded corners are applied to the element's background area (including solid background colors, background images, and background gradients)

Un petit exemple :

HTML :

<div class="rounded_gradient">Test border-radius + gradient</div>

CSS :

.rounded_gradient {
	display: inline-block;
	padding: 10px;
	color: #fff;
	background: #000;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#000) to(#f00));
	background: -webkit-linear-gradient(#000, #f00);
	background:    -moz-linear-gradient(#000, #f00);
	background:     -ms-linear-gradient(#000, #f00);
	background:      -o-linear-gradient(#000, #f00);
	background:         linear-gradient(#000, #f00);
	-pie-background:    linear-gradient(#000, #f00);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(scripts/PIE.php);
}

Implémenter CSS3 PIE pour cette unique correction n'est peut-être pas la meilleure solution mais, comme c'est un fichier que je reprend systématiquement dans mes intégrations, autant s'en servir.

super ca fonctionne Par contre il y a une chose que je capte pas.Mon fichier PIE.htc est placé comme suis : root/themes/js/PIE.htc

Mon fichier css est placé également comme suis : root/themes/css/styles

Si dans mon styles.css je met : behavior: url(../js/PIE.htc); ou behavior: url(js/PIE.htc); ca ne fonctionne pas ! par contre si je met : behavior:url( http://mon-site.com/themes/js/PIE.htc); ca fonctionne ! c'est bizarre
Modifié par stephane72 (02 Aug 2012 - 15:18)

Tu a créé un site en html ou c'est un cms ? Car j'ai eu le même soucis avec un fichier .htc dans un CMS, il fallait indiqué le chemin complet !

La flemme de traduire :

Relative paths

There are two main issues related to relative paths in CSS:
The behavior URL

IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property. This makes invoking the PIE behavior inconvenient, because the URL has to either be:

Absolute from the domain root — this makes the CSS not easily moveable between directories — or,
Relative to the HTML document — this makes the CSS not easily reusable between different HTML files.

URLs in PIE-interpreted CSS properties

PIE does not parse the CSS stylesheets (to do so would be unacceptably slow); it lets IE handle the parsing, selector querying, cascading, etc. and then simply asks it for the resulting property values. This means that when PIE gets a property value, it has no knowledge of the context from which that value originated.

As a result, for properties which contain URL values (such as border-image or -pie-background), PIE cannot resolve those URLs relative to the CSS file in which they appear. It resolves them instead relative to the JavaScript execution context, which is the location of the source HTML document.

Melusine85 a écrit :
Tu a créé un site en html ou c'est un cms ? Car j'ai eu le même soucis avec un fichier .htc dans un CMS, il fallait indiqué le chemin complet !

Avec un CMS