Question problème de positionnement absolu dans Firefox et Chrome


Je ne comprends pas pourquoi FF et Chrome rendent la page différemment. Voici un film dans

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

et 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 complètement bizarre. J'ai essayé de ranger le jeu de champs et l'image monte un peu, mais pas toujours au coin.

Cet article montre que FF a effectivement des problèmes avec le rendu des jeux de champs.

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

Existe-t-il un meilleur moyen de corriger un problème sans utiliser un hack spécifique au navigateur?


19
2017-08-26 15:25


origine


Réponses:


Je ne peux pas croire que cela a 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 champs. À partir de là, modifiez votre positionnement droit et supérieur pour qu'il fonctionne pour vous dans Firefox. (laissez votre cours original en place pour IE, Chrome, Safari, Opera)

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

Ceci est un Firefox Hack que je dis 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. Cela ressemblait à IE, Opera, Safari et Chrome. Ce n'est que dans Firefox que j'ai remarqué le positionnement différent. Cela marche!


26
2017-10-30 14:00



Il semble que Firefox ait un remplissage invisible ou une marge 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 pouvez faire est d'ajouter un wrapper div, puis de positionner absolument l'élément en haut à droite de l'encapsuleur afin qu'il recouvre le coin du Champset.


6
2017-08-26 15:28



Il semble que l'élément .remove-me puisse avoir une marge. Assurez-vous de supprimer cela avant d'ajouter le 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
2017-08-26 17:53



J'ai utilisé @media screen 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
2018-05-30 18:49



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

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


1
2017-11-29 14:53



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


0
2017-08-13 09:06



La véritable solution est firefox et ne définit pas les valeurs par défaut pour top, left, right et bottom.

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


0
2017-09-15 18:54