un bug dans IE7 - corps -Direction: rtl

Question

Quand je mets la direction de l'élément de corps à rtl, dans IE7 (vue compatibilité dans IE8), et survolez ul li, elle se déplace étrangement à gauche par quelques pouces. Un bon exemple est la valeur par défaut ASP.NET MVC CSS (après l'ajout direction:rtl à l'élément du corps). Que se passe-t-il ici?

Le code exemple:

/*---------------------------------------------------------- 
The base color for this template is #5c87b2. If you'd like 
to use a different color start by replacing all instances of 
#5c87b2 with your new color. 
----------------------------------------------------------*/ 
body 
{ 
    background-color: #5c87b2; 
    font-size: .75em; 
    font-family: Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
    color: #696969; 
    direction:rtl; 
} 

a:link 
{ 
    color: #034af3; 
    text-decoration: underline; 
} 
a:visited 
{ 
    color: #505abc; 
} 
a:hover 
{ 
    color: #1d60ff; 
    text-decoration: none; 
} 
a:active 
{ 
    color: #12eb87; 
} 

p, ul 
{ 
    margin-bottom: 20px; 
    line-height: 1.6em; 
} 

/* HEADINGS 
----------------------------------------------------------*/ 
h1, h2, h3, h4, h5, h6 
{ 
    font-size: 1.5em; 
    color: #000; 
    font-family: Arial, Helvetica, sans-serif; 
} 

h1 
{ 
    font-size: 2em; 
    padding-bottom: 0; 
    margin-bottom: 0; 
} 
h2 
{ 
    padding: 0 0 10px 0; 
} 
h3 
{ 
    font-size: 1.2em; 
} 
h4 
{ 
    font-size: 1.1em; 
} 
h5, h6 
{ 
    font-size: 1em; 
} 

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */ 
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 
{ 
    margin-top: 0; 
} 

/* PRIMARY LAYOUT ELEMENTS 
----------------------------------------------------------*/ 

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */ 
.page 
{ 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#header 
{ 
    position: relative; 
    margin-bottom: 0px; 
    color: #000; 
    padding: 0; 
} 

#header h1 
{ 
    font-weight: bold; 
    padding: 5px 0; 
    margin: 0; 
    color: #fff; 
    border: none; 
    line-height: 2em; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 32px !important; 
} 

#main 
{ 
    padding: 30px 30px 15px 30px; 
    background-color: #fff; 
    margin-bottom: 30px; 
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */ 
} 

#footer 
{ 
    color: #999; 
    padding: 10px 0; 
    text-align: center; 
    line-height: normal; 
    margin: 0; 
    font-size: .9em; 
} 

/* TAB MENU 
----------------------------------------------------------*/ 
ul#menu 
{ 
    border-bottom: 1px #5C87B2 solid; 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
    text-align: right; 
} 

ul#menu li 
{ 
    display: inline; 
    list-style: none; 
} 

ul#menu li#greeting 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #fff; 
} 

ul#menu li a 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    background-color: #e8eef4; 
    color: #034af3; 
} 

ul#menu li a:hover 
{ 
    background-color: #fff; 
    text-decoration: none; 
} 

ul#menu li a:active 
{ 
    background-color: #a6e2a6; 
    text-decoration: none; 
} 

ul#menu li.selected a 
{ 
    background-color: #fff; 
    color: #000; 
} 

/* FORM LAYOUT ELEMENTS 
----------------------------------------------------------*/ 

fieldset 
{ 
    margin: 1em 0; 
    padding: 1em; 
    border: 1px solid #CCC; 
} 

fieldset p 
{ 
    margin: 2px 12px 10px 10px; 
} 

fieldset label 
{ 
    display: block; 
} 

fieldset label.inline 
{ 
    display: inline; 
} 

legend 
{ 
    font-size: 1.1em; 
    font-weight: 600; 
    padding: 2px 4px 8px 4px; 
} 

input[type="text"] 
{ 
    width: 200px; 
    border: 1px solid #CCC; 
} 

input[type="password"] 
{ 
    width: 200px; 
    border: 1px solid #CCC; 
} 

/* TABLE 
----------------------------------------------------------*/ 

table 
{ 
    border: solid 1px #e8eef4; 
    border-collapse: collapse; 
} 

table td 
{ 
    padding: 5px; 
    border: solid 1px #e8eef4; 
} 

table th 
{ 
    padding: 6px 5px; 
    text-align: left; 
    background-color: #e8eef4; 
    border: solid 1px #e8eef4; 
} 

/* MISC 
----------------------------------------------------------*/ 
.clear 
{ 
    clear: both; 
} 

.error 
{ 
    color:Red; 
} 

#menucontainer 
{ 
    margin-top:40px; 
} 

div#title 
{ 
    display:block; 
    float:left; 
    text-align:left; 
} 

#logindisplay 
{ 
    font-size:1.1em; 
    display:block; 
    text-align:right; 
    margin:10px; 
    color:White; 
} 

#logindisplay a:link 
{ 
    color: white; 
    text-decoration: underline; 
} 

#logindisplay a:visited 
{ 
    color: white; 
    text-decoration: underline; 
} 

#logindisplay a:hover 
{ 
    color: white; 
    text-decoration: none; 
} 

.field-validation-error 
{ 
    color: #ff0000; 
} 

.input-validation-error 
{ 
    border: 1px solid #ff0000; 
    background-color: #ffeeee; 
} 

.validation-summary-errors 
{ 
    font-weight: bold; 
    color: #ff0000; 
} 

Answer 1

J'ai vu beaucoup de problèmes avec les pages RTL dans toutes les versions de IE. Il est recommandé de définir la direction de RTL sur le HTML et tage ne pas utiliser la propriété direction du CSS.

<html dir="rtl"> 

Il est intéressant de commencer par voir si le comportement change. veille également à ce que la page est rendu en mode standard afin que vous obtenez des résultats plus cohérents en général.