Comportement étrange de chrome/safari traitant de la direction: rtl

Dans Internet Explorer, le code FireFox et Opera ci-dessous crée une boîte flottante rouge sur la droite avec une boîte bleue alignée à droite en dessous de celle attendue, mais dans les navigateurs WebKit (Chrome, Safari) la boîte bleue est alignée à gauche et s'étend au-delà de la zone visible. Fait intéressant, si je supprime le tag DOCTYPE, ces navigateurs agissent normalement comme les autres navigateurs. Y at-il une logique derrière ce comportement ou est-ce juste un bug, pouvez-vous penser à une solution de contournement?Comportement étrange de chrome/safari traitant de la direction: rtl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <style> 
      #top_container { 
       float:right; 
      } 
      #red { 
       background:#f00; 
       color:#fff; 
       padding:10px; 
      } 
      #blue_container { 
       direction:rtl; 
      } 

      #blue { 
       position:absolute; 
       background:#00f; 
       color:#fff; 
       padding:10px; 
       width:200px; 
       direction:ltr; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="top_container"> 
      <div id="red"> 
       red 
      </div> 
      <div id="blue_container"> 
       <div id="blue"> 
        blue 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Source

2010-11-16 nobody

Hein? Aligné à droite? Vous utilisez "direction: rtl", c'est pour les langues qui lisent de droite à gauche, qu'essayez-vous d'accomplir? –

"direction: rtl" force aussi le moteur à restituer les choses de droite à gauche. Ce que j'essaye de réaliser est un bouton (la boîte rouge) qui flotte sur la droite avec une liste déroulante accrochante (boîte bleue) qui montre et se cache quand le bouton est cliqué. – nobody

OK, quelques observations:

La direction du texte (rtl/ltr) est hors de propos. Si vous supprimez ce style, la situation est la même.

Si vous supprimez le nœud rouge, la situation est légèrement différente, la zone bleue s'étendant encore plus loin de la fenêtre vers la droite.

Voilà comment je lis la situation:

#top_container ne contient qu'un seul élément de flux: #red
#top_container est float: right. Il est donc positionné sur le bord droit de la fenêtre, permettant la largeur requise par l'élément de flux contenu (#red).
#blue est positionné de façon absolue, par rapport à #top_container, mais il n'a aucun positionnement. Il s'aligne donc sur le bord gauche avec la boîte rouge et occupe 200px de largeur.

Tout cela est juste ce que je m'attendais. Ce que je ne peux pas expliquer, c'est pourquoi les autres navigateurs le font différemment. Pourquoi alignent-ils #blue sur le bord droit de #red? Je ne vois pas pourquoi cela devrait être. De toute façon, vous pouvez vous rapprocher de ce que vous voulez en ajoutant right:0 à votre style #blue.

Source

2010-11-16 13:55:48 jhurshman

"... Il s'aligne donc sur le bord gauche avec la boîte rouge et occupe 200px de largeur." - Il doit être aligné sur le bord droit car le conteneur parent a une direction "de droite à gauche", tous les autres navigateurs le font de cette façon. "vous pouvez être en mesure de vous rapprocher de ce que vous voulez en ajoutant le droit: 0" - Dans ma situation réelle, la boîte rouge n'est pas nécessairement à l'extrême droite, c'est une sorte de composant qui peut être n'importe où sur la page. – nobody

Voir mon commentaire ci-dessus sur ce que j'essaie de réaliser, une idée alternative serait appréciée mais je suis vraiment intéressé de savoir pourquoi les navigateurs WebKit n'agissent pas comme les autres dans ce cas. – nobody

La spécification W3C est ici: http://www.w3.org/TR/CSS21/visuren.html#block-boxes. De la façon dont j'ai lu cela, WebKit en mode strict le fait incorrectement, mais il semble étrange qu'il soit correct en mode quirks. – jhurshman

Comportement étrange de chrome/safari traitant de la direction: rtl

Répondre

Questions connexes