28172 sujets

CSS et mise en forme, CSS3

Propriété outline et Firefox

Bonjour

J’ai un petit souci concernant la propriété outline, et l’interprétation ou rendu de cette dernière dans Firefox.

Un exemple vaut mieux que milles mots, voici la différence entre Firefox et les autres navigateurs.
upload/42771-outline.jpg

Comme vous pouvez le constater dans le cas de Firefox, le contour de .container ce retrouve pousser ver le haut par #logo, alors que les autres navigateurs place le contour de .container et l’emplacement de #logo à la position voulut.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>outline</title>
<style type="text/css">
	.container{
		position: relative; 
		width: 600px; 
		height:140px; 
		margin: 0 auto; 
		padding: 0; 
		background: #fff; 
		color: #555;
		border: 1px solid #dfdfdf;
		border-top-color: #f60;
		outline: 20px solid #f3f3f3;
		margin-top: 100px;
		margin-bottom: 100px;
	}
	#logo {
		border: 10px solid #f3f3f3;
		outline: 1px solid #dfdfdf;
		height:	160px;
		width: 260px;
		position: absolute;
		left: 50px;
		bottom: 20px;
	}
</style>
</head>
<body>
<div class="container">
<div id="logo"></div>
</div>
</body>
</html>


Erreur ou mauvaise utilisation de la propriété ? Faut il que je revois l’ensemble ou existe il une alternative pour Firefox de manière à avoir le même rendu que sur les autres navigateurs, IE8, Chrome, Safari, Opéra…
Bonjour,

Pas le temps d'analyser le code en détail, mais ça ressemble furieusement à un cas de fusion des marges. Apparemment Firefox estime qu'un outline ne doit pas bloquer la fusion des marges (donc elle se produit), et les autres estiment qu'un outline bloque la fusion des marges (qui ne se produit alors pas); d'où la différence de rendu.

Simple supposition, je n'ai pas vérifié et testé le code.
Bonsoir,

tu peut bidouiller en créant tes bordures à l'aide de la propriété : box-shadow, qui évitera que Firefox redimensionne le conteneur parent.

ex: 

box-shadow:
0 0 1px 20px #f3f3f3, 
inset 0 4px 1px -3px #f50, 
inset 0 0 1px 1px  #dfdfdf
;

1ere ombre = outline
2eme ombre = border-top
3eme ombre = border

Cordialement,
GC

<edit ="cafouillage avec la bordure mise autour du outline, rectifié Smiley smile " />
Modifié par gc-nomade (12 Jan 2012 - 18:37)
Aucune idée ! Mais merci pour l'infos, je vais voir sa.

Il me semble qu'un parent positionné hors du flux(absolue, fixée ou float) peut avoir des répercussions sur l'ensemble du design.

Merci pour la piste à suivre !
gc-nomade a écrit :
Bonsoir,

tu peut bidouiller en créant tes bordures à l'aide de la propriété : box-shadow, qui évitera que Firefox redimensionne le conteneur parent.

ex: 
box-shadow:
0 0 1px 20px #f3f3f3,
 0 0 1px 21px  #dfdfdf, 
inset 0 4px 1px -3px #f50
;

1ere ombre = border
2eme ombre = outline
3eme ombre = border-top

Cordialement,
GC

Oui merci, mais, dans ce cas j'utilise une propriété CSS3, et malheureusement IE8 ne joue pas le jeux !

Alors que mon problème ne concerne que Firefox, bon je sais je pinaille sur des détails, mais outline reste une propriété reconnu par la plus part des navigateurs IE8 comprit, d'ou mon entêtement à trouver une solution commune à tous les navigateurs (enfin en ce comprend, pas IE6, IE7 ou je ne sais quel navigateur exotique).
Oui en effet,
d'autant que d'un navigateur a l'autre (et leur versions) le positionnement se verra "rectifier" , certains réserve a l’écran de la place (en redimensionnant le conteneur parent body ou autre) pour les élément extrait du flux ou font en sorte qu'il ne se chevauche pas (ex:deux élément avec une ligne de texte en position absolue dans une zone trés proche et adjacent dans le code html).

Ces différences entre navigateur tendent a disparaitre ...
oups,

il y a éventuellement la possibilité de proposer cette alterntive pour Firefox uniquement avec un selecteur encore peut connue:
:any()

cette regle est disponible dans Firefox avec un prefix, ce qui donne comme pansement:
:-moz-any(.container) {border:none;outline:none;
box-shadow:
0 0 1px 20px #f3f3f3, 
inset 0 4px 1px -3px #f50, 
inset 0 0 1px 1px  #dfdfdf
;}


en attendant de trouver mieux Smiley smile

(j'espere que ton soucis t'aura apporter quelques pistes et infos interessantes)

Cordialement,

GC
Sujet clos
Aller à