28172 sujets

CSS et mise en forme, CSS3

Boujour,

Je suis entrain de styliser mon site avec CSS, et j'ai noté un bug plutôt bizarre de la propriété box shadow.

Voici le résultat obtenu:

http://tof.canardpc.com/view/b9139b18-a61b-4ff4-97ba-c1731347be21.jpg

Voici le code html:

<a href="#" class="header-button" title="">Test</a>


Voici le code css:

	
	.header-button {
		background-color: #383532;
		border: 1px solid #000;
		-webkit-border-radius: 4px;
		border-radius: 2px;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
							0 1px 0 rgba(255, 255, 255, 0.2);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
					0 1px 0 rgba(255, 255, 255, 0.2);
		display: inline-block;
		padding: 5px 10px;
		margin: 6px 25px 0 0;
	}


Auriez-vous une idée d'où viendrait ce bug ?

Ce que j'ai remarqué d'encore bizarre, c'est que la propriété avec plusieurs ombres de ce tutorial fonctionne sous mon IE9
Personne n'a d'idée ?

J'ai rajouter ces scripts dans mes meta mais toujours rien...

<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- IE 9 Standards mode beginning -->
		<meta http-equiv="X-UA-Compatible" content="IE=9">
	<!-- IE 9 Standards mode ending -->
	
	<!--[if gte IE 9]>
		<style type="text/css">
		.gradient {
			filter: none;
		}
	</style>
	<![endif]-->
Modérateur
Bonjour,

cela ressemble fort à un bug du rendu d'ie. Peut-être faut-il leur soumettre le problème.

Sinon l'implémentation de boy-shadow est loin du pixel-perfect… :
http://thany.nl/apps/boxshadows/

Alors un bricolage pour utiliser box-shadow comme système de bordure est forcément un peu risqué.