web-dev-qa-db-fra.com

problème avec le positionnement absolu dans firefox et chrome

Je ne comprends pas pourquoi FF et Chrome affiche ma page différemment. En voici une capture d'écran dans

firefox: exemple firefox http://grab.by/65Bn

et en voici un en chrome

chrome: exemple de chrome http://grab.by/65BB

fieldset a une position relative et l'image a une position absolue.

voici la structure de base:

<fieldset class="passenger-info">
  <legend>Passenger 1</legend>
  <div class="remove-me">
    <img src="/images/delete-icon-sm.png" />
  </div>
</fieldset>

fondamentalement, l'image est déclarée juste après la légende.

voici le css pour fieldset:

.passenger-info {
  background:none repeat scroll 0 0 #F2F2F2;
  border:1px solid #9D240F;
  display:inline;
  float:left;
  margin-bottom:10px;
  margin-right:10px;
  padding:3px 10px;
  position:relative;
  width:350px;
}

et pour l'image de suppression:

.remove-me {
  border:1px solid red;
  position:absolute;
  right:0;
  top:0;
}

c'est totalement bizarre. J'ai essayé de mettre le rembourrage de champ en place, et l'image monte un peu, mais toujours pas au coin.

Cet article montre que FF a en effet des problèmes avec le rendu des ensembles de champs.

http://www.codingforums.com/showthread.php?t=132624

Existe-t-il une meilleure façon de faire un correctif sans utiliser un hack spécifique au navigateur?

htmlcssfirefoxgoogle-chromecss-position
22
corroded

Je ne peux pas croire que ce soit 4 ans et toujours pas répondu. J'ai cherché partout cette réponse. Voici ce que j'ai fait pour utiliser la position absolue sur une image dans un champ. À partir de là, changez votre positionnement à droite et en haut pour le faire fonctionner pour vous dans Firefox. (laissez votre classe d'origine en place pour IE, Chrome, Safari, Opera)

@-moz-document url-prefix() { 
  .remove-me {
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

Il s'agit d'un Firefox Hack dont on me dit qu'il fonctionne pour chaque version de Firefox. J'utilise Firefox version 33.0.2, donc je ne peux pas confirmer que cela fonctionne sur les anciennes versions. J'ai eu le même problème sur mon site. Il avait la même apparence dans IE, Opera, Safari et Chrome. Ce n'est que dans Firefox que j'ai remarqué un positionnement différent. Cela marche!

29
Marcus

Il semble que Firefox ait un remplissage ou une marge invisible qui place l'élément en haut à droite de l'espace de texte. Chrome place l'élément en haut à droite de l'élément fieldset en dehors du flux de texte.

Une chose que vous pourriez faire est d'ajouter un wrapper div, puis de positionner absolument l'élément en haut à droite du wrapper de sorte qu'il se trouve sur le coin de l'ensemble de champs.

7
js1568

Il semble que l'élément .remove-me puisse avoir une marge. Assurez-vous de supprimer cela avant d'ajouter un positionnement absolu aux éléments.

Pour des résultats précis, vous devez toujours effectuer une "réinitialisation" dans votre CSS. Cela signifie supprimer la marge/le remplissage de chaque élément.

Une simple réinitialisation:

* { margin: 0; padding: 0px; }

Mettez cela en haut de votre CSS.

2
Jake Bellacera

J'ai utilisé l'écran @media et (-webkit-min-device-pixel-ratio: 0) {} et corrigé mes absolus de cette façon. Ce n'est pas très sec mais ça marche.

2
Nicktea

Je pense que c'est parce que vous n'avez pas indiqué la hauteur de la div (passager-info) qui contient le bouton; Chrome commence à agir lorsque vous ne le spécifiez pas.

1
Arno Inen

Au lieu d'utiliser la marge, utilisez gauche, haut, droite, bas. Exemple:

position: absolute;top: 10px;left: 20px;

1
Basant

La vraie solution est Firefox et donc ne définissez pas de valeurs par défaut pour le haut, la gauche, la droite et le bas.

J'ai pu résoudre mon problème en les réglant correctement.

1
Austin Peterson