JQuery with IE reading inherted css property, how to prevent?

Question

I have an issue with internet explorer dealing with JQuery or JQuery dealing with IE :)

Simply I have the following code:

$(function () {
   $("*").each(function (i) {
    var textalign = $(this).css("text-align");
    if (textalign == "left") {$(this).css({'text-align': 'right'});} 
      else if (textalign == "right"){$(this).css({'text-align': 'left'});}
   });
}); 

The function of code is to swap text-align of all tags, in FF & Chrome this code do perfect work, but on IE I have a problem on it, I think it read inherited text-align property after changing parent property and swap it again !

To Understand what happening, i attached here 2 images of source code after applying JQuery code:

In FF (Perfect !) :

In IE (Wrongly !) :

BTW, if you wondering about use this way, I have Open Source project and using inline styling on hundreds of JSPs, with tables too, so Its workaround solution to flip layout and support multilingual product (support ltr & rtl languages) ...

Hopefully found solution.

Note: I'm using JQuery 1.7.1 ... and this problem issued in ie8 & ie9.

Note 2: I got worst results when using jQuery("*").each(jQuery("*").get().reverse(), function (i) { or jQuery(jQuery("*").get().reverse()).each(function (i) {

Edit 1 & 2: was inside this question

Edit 3:

Note 3 : the issue is happening with all elements on page whatever that element even script , html , style , ... etc and strangest thing some of elements did not get any touch ! see this screenshot:

Edit 4:

My problem partially solved, on IE9 working well, in IE8 not working, solution from Stefan , after trying alot of ways the summery on my code:

in JQuery code:

if (jQuery.browser.msie == false || jQuery.browser.msie == undefined) { 
            if (textalign == "left") {jQuery(this).css({'text-align': 'right'});} 
            else if (textalign == "right"){jQuery(this).css({'text-align': 'left'});}
        }

In CSS file that loaded for IE only :

body *[style*="text-align: left"] {
  text-align: right !important;
}

body *[style*="text-align: right"] {
  text-align: left !important;
}

Regards,

Answer 1

Couldn´t this be of any help?

body.rtl * {
  text-align: right !important;
}

You really should mark the elements that should keep the rule for text-align: left with a specific CSS class to separate them from the rest.

You may also try this CSS to switch text-align values

body *[style*="text-align: left"] {
  text-align: right !important;
}

body *[style*="text-align: right"] {
  text-align: left !important;
}

I´ve not tested this one yet but it should make all elements with a style attribute value containing "text-align: left" to use that rule.

UPDATE

Created an example at jsFiddle. Hope it helps.

UPDATE 2

New solution using jQuery: jsFiddle

$('body *[style*="text-align"]').each(function() {

    // Toggle text-align value
    $(this).css('text-align', (($(this).css('text-align') == 'left') ? 'right' : 'left'));

});

Answer 2

Why not circumvent the problem by performing your loop in reverse?

Replace this:

$("*").each(function (i) {

With this:

$.each($("*").get().reverse(), function (i) {

Answer 3

This is a really interesting problem. Essentially, it sounds like you want to select parts of the DOM that can contain content (<p>, <div>, <span>, etc.) while excluding all other elements.

It sounds like the jQuery psuedo-selector $(":visible") would work for you, but considering that IE assigned this value to completely invalid elements, I have my doubts.

It may be crazy, but perhaps you should consider coming up with a list content-level DOM elements for which style="text-align: right" is valid. This could be a really tall task, depending on the age of the product and what sort of HTML it generates. If you're dealing with a set of ten or twelve elements, it might be worth writing a style sheet to handle this and loading that via jQuery (assuming you can't easily include it on all your pages).