problème avec le positionnement absolu dans firefox et chrome
Je ne comprends pas pourquoi FF et Chrome de rendre ma page différemment. Voici un screenie dans
firefox: firefox exemple http://grab.by/65Bn
et voici un en chrome
chrome: chrome exemple http://grab.by/65BB
fieldset a une position relative et de 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é 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'retirez-moi de l'image:
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}c'est totalement bizarre. J'ai essayé de mettre le fieldset le rembourrage, et l'image se déplace vers le haut un peu, mais pas encore dans le coin.
Ce post montre que FF n'ont, en effet, des problèmes avec le rendu des balises html fieldsets.
http://www.codingforums.com/showthread.php?t=132624
Est-il une meilleure façon de faire un correctif sans l'aide d'un navigateur spécifique hack?
- HTML serait plus utile, je devine que ce que vous avez collé la structure est Ruby?
- yup haml, son plus comme le pseudo-code pour le code html, mais oui je pense que je pourrais donner une édition
Vous devez vous connecter pour publier un commentaire.
Je ne peux pas croire que c'est 4 ans et toujours pas de réponse. J'ai cherché, en tous lieux, pour cette réponse. Voici ce que j'ai fait pour utiliser la position absolue sur une image dans un fieldset. À partir d'ici, de changer de droite et de haut de positionnement pour le faire fonctionner pour vous dans Firefox. (conservez l'original de votre classe à la place de IE, Chrome, Safari, Opera)
C'est un Firefox Hack que je me suis dit fonctionne pour toutes les versions de Firefox. J'utilise Firefox Version 33.0.2, donc je ne peux pas confirmer cela fonctionne sur des versions plus anciennes. J'ai eu le même problème sur mon site. Il a regardé le même sous IE, Opera, Safari et Chrome. C'est seulement dans Firefox, j'ai remarqué que le positionnement différent. Cela fonctionne!
Il semble que Firefox a un invisible rembourrage ou de marge, qui place l'élément en haut à droite de la place pour le texte. Chrome est de placer 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 une div wrapper et puis absolument position de l'élément dans le coin supérieur droit de l'enveloppe de sorte qu'il pose sur le coin de la fieldset.
Il semble que l' .retirez-moi de l'élément peut avoir de la marge. Assurez-vous de supprimer ce avant l'ajout de positionnement absolu des éléments.
Pour des résultats précis, vous devriez toujours faire un "reset" dans votre CSS. Cela signifie la suppression de la marge/rembourrage de chaque élément.
Un simple reset:
Mettre en haut de votre feuille de style CSS.
J'ai utilisé de @media screen and (-webkit-min-device-pixel-ratio:0) {} et fixe mon absolus de cette façon. Son pas très sec, mais il fonctionne.
La vraie solution est firefox et ie ne pas définir les paramètres par défaut en haut, à gauche, à droite et en bas.
J'ai pu résoudre mon problème en définissant ces correctement.
Au lieu d'utiliser la marge gauche, haut, droite, bas. Exemple:
position: absolute;top: 10px;left: 20px;Je pense que c'est parce que vous n'avez pas indiquer la hauteur de la div (passager-info) qui contient le bouton; Chrome commence à agir lorsque vous ne spécifiez pas cette.
J'ai eu un problème similaire avec un site web et les images dans google Chrome, où le mal. J'ai eu la position d'une image et d'une zone de saisie de la même manière que votre exemple, au début de ce post, et je l'ai résolu en mettant la position absolue dans la zone d'entrée et la position de l'image en coordonnées relatives.
Quand je fais ça, ça change de ces deux positions, mais met des marges dans les deux. Je l'ai eu je la veux, pour résoudre ce problème avec Firefox un Chrome, vous devez suivre certaines de ces astuces afin de mettre les images dans le bon endroit. Jouer avec la position pour le faire fonctionner.