web-dev-qa-db-fra.com

Modèle de boîte Internet Explorer - Qu'est-ce que l'offset?

J'essaie d'adapter un site pour prendre en charge IE 7. Cependant, j'ai quelques éléments qui sont décalés à droite de 69 pixels. Je teste dans IE9, paramétré pour rendre la page comme s'il s'agissait d'IE7. Lorsque j'active le mode développeur et inspecte l'élément, je remarque qu'en entourant la "marge" se trouve un paramètre appelé "offset".

Je n'avais jamais entendu parler de cela auparavant et Google n'a pas beaucoup aidé. J'ai seulement réussi à trouver quelque chose à propos de la compensation flottante, qui n'était pas la même chose, mais je suppose qu'elle était là pour éliminer certains problèmes liés au mode excentrique? Comment puis-je éliminer ce paramètre offset? 

Évidemment, j'ai une feuille de style spécifique à IE-7 et vous pouvez tester le problème vous-même en allant dans mon environnement de test sur ce lien:

http://suitable.amok-adhoc.com/2012/

Résolu:

J'ai trouvé une solution - c'était assez simple. Je venais juste de déclarer explicitement la position comme ceci (même si elle était héritée de l’élément parent de tous les autres navigateurs IE a ajouté une marge et l’a appelée "offset", ce qui est remplacé par ceci):

p {
    left:0px;
}
cssinternet-explorerinternet-explorer-7offset
34
funkylaundry

Le offset est la distance à laquelle l'élément a été déplacé de son emplacement d'origine. Cela se voit lorsque vous positionnez un élément relatif ou absolu avec les valeurs left, top, bottom et/ou right. Prenez le code suivant comme exemple:

#header {
    top: 3em;
    left: 3em;
    position: relative;
}

Si nous inspectons cet élément dans Internet Explorer 10, nous voyons le offset que vous avez mentionné. Les valeurs em ont été converties en pixels, mais l'effet est toujours visible. Notez que nous voyons quelque chose de similaire dans les outils de développement Chrome (également dans Opera), à la différence qu’il porte le nom "position":

enter image description hereenter image description here

Curieusement, Firefox ne semble même pas communiquer le décalage/la position via leur illustration:

enter image description here

En fin de compte, c'est une simple question de sémantique. Que nous l'appelions "offset" ou "position", c'est toujours la même chose; c'est la distance de son emplacement d'origine sur l'écran.

J'espère que cela t'aides.

32
Sampson

Cela semble étrange, mais vous pouvez essayer de définir vertical-align: top dans CSS pour les entrées. Cela corrige cela dans IE8, au moins.

2
BrainCoder

J'avais un problème similaire, la largeur de mon menu d'en-tête n'apparaissait pas correctement (apparaissait avec une largeur réduite), après un certain débogage, j'ai réalisé que j'avais ajouté rem Poly-fill qui créait un problème pour moi. J'utilisais aussi meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1"). 

Après avoir supprimé le fichier JS rem-polyfil, il a commencé à fonctionner correctement pour moi.

0
Muhammad Hannan

Vous pouvez essayer d'utiliser: position: -ms-device-fixed; Cette astuce m'aide.

0
mac.slusarek