Position fixe ne fonctionne pas sur Chrome

Colonne de droite de position fixe fonctionne sur Opera & Firefox mais pas sur Chrome, toute solution?

#rightcolumn { 
margin: 0px 0px 0px 0px;
float: right;
font-family: Arial;
font-weight: bold;
height: auto;
width: 300px;
display: inline;
position: fixed;
}
  • Pouvez-vous fournir un cas de test? Votre CSS devrait fonctionner parfaitement.
  • Décrivez votre problème. Afficher tous de votre code.
  • De quoi êtes-vous de l'application de ce sélecteur, et qu'entendez-vous par "Ne fonctionne pas" - Pourriez-vous créer un jsFiddle pour montrer ce que tu veux dire?
  • #leftcolumn { height: auto; width: 600px; float: left; } #rightcolumn { position: fixed; float: right; font-family: Arial; font-weight: bold; height: auto; width: 300px; display: inline; }
  • avec trois grandes erreurs, ses CSS ne doit pas travailler du tout.
  • doit avoir travaillé en la regardant de la position:fixed côté des choses, de toute façon.
  • sauf pour le fait qu'il n'existe pas de coordonnées spécifiées pour position:fixed. C'est un pêle-désordre qui dépend totalement de la navigateur à combler les vides et d'ignorer les règles contradictoires. Je suppose que nous venons d'avoir des définitions différentes de ce qui "fonctionne".
  • la colonne position fixe fonctionne sur Opera & Firefox mais pas sur Chrome" était surtout le référencement, c'est bizarre que cela ne fonctionne pas dans Chrome seul. Peut-être qu'il n'avait pas assez de code? Mais oui, j'entends ce que vous dites.
  • pas bizarre du tout. Chaque navigateur va interpréter non conforme code différemment; c'est pourquoi nous suivons des normes de conformité.
  • trouve toujours ça bizarre cependant, un cas de test m'aurait aidée à regarder le pourquoi de tout cela, de la conformité de côté.
  • lorsque le code est non-conforme, le navigateur doit essayer de "comprendre" afin de rendre quelque chose. Chaque navigateur a été écrit par une équipe unique et est basé sur un moteur de rendu. Chaque fendre le moteur est écrit par une autre équipe. Ce qui est bizarre code aléatoire rendu de façon imprévisible? Si c'était prévisible, alors il serait la suite d'une Norme. Depuis le code de l'utilisateur ne suit pas les règles Standard, que voulez-vous peut-être attendre le navigateur à faire? Je suis d'accord avec votre implicitement que la question est mal écrit et pas d'information.
  • j'ai signalé webkit bugs avant et toujours à la recherche de plus, je suppose que j'ai juste besoin de pinailler sur la question (toujours à la chasse pour les bugs), mais je comprends ce que vous dites. Chrome est l'un des plus intelligents navigateurs et j'ai trouvé ça bizarre qu'il était le seul à ne pas fonctionner comme le reste, même à la non-conformité du code.
  • Je pourrait aussi affirmer que Chrome était en parfait état de fonctionnement, en ignorant que les mauvais code.
  • c'est exact, même si les navigateurs ont babied HTML et a permis à la non-conformité à l'une au moins fonctionner dans tous les navigateurs, à un certain degré. Ce que certains appellent le "code du travail". Urghh, dure.

InformationsquelleAutor Saiful Islam | 2012-01-19
  1. 12

    1) tout d'Abord, retirer display: inline parce que, si vous voulez le bloc au niveau de l'élément position: fixed, vous ne pouvez pas l'avoir inline. Un fixe de la position de l'élément est à l'extérieur de la normale de l'écoulement et donc, par définition, ne peut pas aussi être en ligne.

    2) d'autre part, de supprimer float: right puisque vous le voulez fixed. Selon la spécification, il ne peut pas être les deux.

    "...si la 'position' a la valeur "absolue" ou "fixe", la boîte est en position absolue, la valeur calculée de 'flotter' est 'none'..." ~ spec W3C

    3) Et enfin, lors de l'utilisation de absolute ou fixed (fixed est un sous-ensemble de absolute selon la spécification), de définir une position de l'élément en ajoutant quelque chose comme top: 0; et right: 0; ce qui le place à l'égard des bords de son parent.

    #rightcolumn { 
    margin: 0;
    font-family: Arial;
    font-weight: bold;
    height: auto;
    width: 300px;
    position: fixed;
    top: 0; <-- adjust accordingly
    right: 0; <-- adjust accordingly
}

    Ici est la Le Formatage visuel Modèle de spec.

    InformationsquelleAutor Sparky
  2. 5

    Selon la spécification fixe signifie que L'élément est positionné par rapport à la fenêtre du navigateur. mais vous n'êtes pas en précisant tout (en haut,à droite,à gauche,en bas), donc il sait où s'asseoir à la fenêtre. Essayez de spécifier la position réelle.

    InformationsquelleAutor ehudokai
  3. 1

    Vous ne pouvez pas flotter et de fixer une position sur un élément et espérer qu'il fonctionne. Aussi, vous n'avez pas déclaré l'endroit où vous souhaitez que l'élément fixe parce que vous n'avez pas de top, left, right, ou bottom dans votre CSS.

    Retirer le flotteur, ajouter de positionnement (top, left, right, ou bottom), et il devrait fonctionner très bien.

    <div id="rightcolumn">
<p>blah blah blah</p>
</div>

#rightcolumn { 
margin: 0px;
top:0;
right:0; /*places div in top right corner and stays there even when you scroll!*/
font-family: Arial;
font-weight: bold;
height: auto;
width: 300px;
position: fixed;
}

    Vous avez maintenant une 300px de largeur de la boîte de place dans le coin en haut à droite du navigateur. Sauf si vous êtes en utilisant IE6 ou 7, de ne pas y travailler.

    InformationsquelleAutor tahdhaze09
  4. 0

    Également vérifier si l'emballage a permis l'accélération matérielle par le fait d'avoir -webkit-transform: translate3d(0, 0, 0);

    InformationsquelleAutor Steve Reichbach