JQuery用IE读取继承的css属性，如何防止？
我在处理 JQuery 的 Internet Explorer 或处理 IE 的 JQuery 时遇到问题:)
我有以下代码：
$(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'});}
});
});
代码的功能是交换 FF 和 FF 中所有标签的文本对齐方式。 Chrome 这段代码做得很完美，但在 IE 上我有一个问题，我认为它在更改父属性后读取继承的 text-align 属性并再次交换它！
为了了解发生了什么，我在应用 JQuery 代码后附上了 2 张源代码图像：
在 FF 中（完美！）： 
在 IE 中（错误！）： 
顺便说一句，如果您想知道关于使用这种方式，我有开源项目，并在数百个 JSP 上使用内联样式，也有表格，所以它的解决方案是翻转布局和支持多语言产品（支持 ltr 和 rtl 语言）...
希望找到解决方案。
注意：我使用的是 JQuery 1.7.1 ...并且这个问题在 ie8 和 ie8 中发布。即9。
注 2：使用 jQuery("*").each(jQuery("*").get().reverse(), function (i) { 或 jQuery 时，我得到了最差的结果(jQuery("*").get().reverse()).each(function (i) {
编辑 1 和 2：在这个问题内
编辑 3 ：
注3：问题正在发生页面上的所有元素，无论该元素甚至 script 、 html 、 style 等，最奇怪的是某些元素没有得到任何触摸！看这个截图： 
编辑4：
我的问题部分解决，在 IE9 上运行良好，在 IE8 中不起作用，解决方案来自 Stefan，在尝试了很多之后我的代码总结的方式：
在 JQuery 代码中：
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'});}
}
在仅为 IE 加载的 CSS 文件中：
body *[style*="text-align: left"] {
text-align: right !important;
}
body *[style*="text-align: right"] {
text-align: left !important;
}
问候，
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,
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
难道这没有什么帮助吗？
您确实应该使用特定的 CSS 类来标记应保留
text-align: left规则的元素，以将它们与其余元素分开。您也可以尝试使用此 CSS 来切换文本对齐值，
我尚未测试过此值，但它应该使所有具有包含“text-align: left”的样式属性值的元素都使用该规则。
更新
在jsFiddle创建了一个示例。希望有帮助。
更新2
使用jQuery的新解决方案：jsFiddle
Couldn´t this be of any help?
You really should mark the elements that should keep the rule for
text-align: leftwith a specific CSS class to separate them from the rest.You may also try this CSS to switch text-align values
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
为什么不通过反向执行循环来规避这个问题呢？
将其替换
为：
Why not circumvent the problem by performing your loop in reverse?
Replace this:
With this:
这是一个非常有趣的问题。本质上，听起来您想要选择 DOM 中可以包含内容的部分（
、< /code> 等），同时排除所有其他元素。它听起来就像 jQuery psuedo-selector
$(":visible")适合你，但考虑到 IE 将此值分配给完全无效的元素，我有疑问。这可能很疯狂，但也许您应该考虑提出一个
style="text-align: right"有效的内容级 DOM 元素列表。这可能是一项非常艰巨的任务，具体取决于产品的年龄以及它生成的 HTML 类型。如果您正在处理一组十个或十二个元素，则可能值得编写一个样式表来处理此问题并通过 jQuery 加载它（假设您无法轻松地将其包含在所有页面上）。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).