Databases
StackOverflow2013
Postsdbo
POJQuery with IE reading inherted css property, how to prevent?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery with IE reading inherted css property, how to prevent?
    text
    copied!<p>I have an issue with internet explorer dealing with JQuery or JQuery dealing with IE :) </p> <p>Simply I have the following code:</p> <pre><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'});} }); }); </code></pre> <p>The function of code is to swap text-align of all tags, in FF &amp; 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 ! </p> <p>To Understand what happening, i attached here 2 images of source code after applying JQuery code: </p> <p>In FF (Perfect !) : <img src="https://i.stack.imgur.com/TGic1.png" alt="Firefox result&#39;s source code snapshot"></p> <p>In IE (Wrongly !) : <img src="https://i.stack.imgur.com/zxmt0.png" alt="IE result&#39;s source code snapshot"></p> <p>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 &amp; rtl languages) ...</p> <p>Hopefully found solution.</p> <p>Note: I'm using JQuery 1.7.1 ... and this problem issued in ie8 &amp; ie9.</p> <p>Note 2: I got worst results when using <code>jQuery("*").each(jQuery("*").get().reverse(), function (i) {</code> or <code>jQuery(jQuery("*").get().reverse()).each(function (i) {</code></p> <p><strong>Edit 1 &amp; 2: was inside this question</strong></p> <p><strong>Edit 3:</strong> </p> <p>Note 3 : the issue is happening with all elements on page whatever that element even <code>script</code> , <code>html</code> , <code>style</code> , ... etc and strangest thing some of elements did not get any touch ! see this screenshot: <img src="https://i.stack.imgur.com/wLbAd.png" alt="all elements but some too !"></p> <p><strong>Edit 4:</strong></p> <p>My problem partially solved, on IE9 working well, in IE8 not working, solution from <a href="https://stackoverflow.com/questions/7836859/jquery-with-ie-reading-inherted-css-property-how-to-prevent/8298786#8298786">Stefan</a> , after trying alot of ways the summery on my code: </p> <p>in JQuery code:</p> <pre><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'});} } </code></pre> <p>In CSS file that loaded for IE only :</p> <pre><code>body *[style*="text-align: left"] { text-align: right !important; } body *[style*="text-align: right"] { text-align: left !important; } </code></pre> <p>Regards, </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload