Normalize li text-align

[necolas]

Chrome and Firefox have different UA values of text-align for li. It can result in different alignment of text in li depending on the direction of text (LTR/RTL). I think a fix would be to add li {text-align:inherit;}.

Test case: http://codepen.io/anon/pen/fslyG (Firefox gets it "right").

[thierryk]

I ran into this issue myself, but I'm using [dir] instead of styling the list item as this style could be overwritten. Test case: http://codepen.io/thierry/pen/rocFJ

[cvrebert]

Firefox 45 and Chrome 48 both render the first testcase the same, as "Test .1"

[jonathantneal]

The older Chrome ≤ 20, Edge 12, Firefox ≤ 39, Internet Explorer 8-11, Opera ≤ 12, and Safari ≤ 6 put "Test" on the left.

The newer Chrome 21 - 48, Firefox 40 - 43, Opera 15 - 34, and Safari 6.2 - 9 put "Test" on the right.

However, this behavior seems to contradict the li UA values for text-align, which in Firefox is match-parent and in Chrome -webkit-match-parent.

match-parent is similar to inherit, but the values start and end are calculated according the parent's direction and are replaced by the adequate left or right value. — MDN

This text-align value did not change in Chrome between 20 and 21, which is additionally confusing.

Oh, and for what it’s worth, Edge and Internet Explorer 8-11 add a line break between "1." and "Test".

[thierryk]

@cvrebert @jonathantneal

It is not clear in your comments if you guys have checked my testcase but if you did, you had to uncomment the first rule to see my "fix". Here is a version with the fix "on": http://codepen.io/thierry/pen/WrMXKw
Does it make a difference? Because it used to a couple of years ago...

[jonathantneal]

Yes, I did test both combinations. li { text-align: inherit; } or [dir] { text-align: start; } gets most newer browsers to behave more like older browsers and Edge/IE, except for Chrome which will then behave differently than all other browsers in situations when the dir attribute does not have a value.

Until there is a fix for Edge, I recommend closing this issue based on how browsers have evolved since Chrome 20, Firefox 39, Opera 12, and Safari 6.0 (6.2 displays the same as modern browsers).