All geek questions in one place

CSS: after failure in IE8 but only after adding jQuery reference

It took me a few hours to track this issue, and I'm a little shocked at what I see.

Here is the code:

<!DOCTYPE html> <html> <head> <title>Example</title> <style> a:after { content: attr(data-content); } </style> </head> <body> <a id="targetElement" href="http://www.google.com">Hello World</a> </body> <script type="text/javascript"> document.getElementById("targetElement").setAttribute("data-content", "moo"); </script> </html>

The above example works in IE8. When viewing, the word "moo" is added to the end of the target element:

enter image description here

Now, spice things up a little bit by jQuery link via CDN. Add the following line of code:

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"></script>

so the whole example reads like:

 <!DOCTYPE html> <html> <head> <title>Example</title> <style> a:after { content: attr(data-content); } </style> </head> <body> <a id="targetElement" href="http://www.google.com">Hello World</a> </body> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript"> document.getElementById("targetElement").setAttribute("data-content", "moo"); </script> </html>

refresh IE8 and notice that the word moo has been dropped, but the element retains its data attribute:

enter image description here

I ... I do not understand. I thought jQuery was supposed to help me with cross-browser compatibility ... but here it is a disruptive store.

Any ideas on how I can handle this? Or get around?

+4
source share
1 answer

Good! I chatted with Joseph Marikle and we worked on a lot of examples trying to track down the problem.

I have good news and I have bad news. Bad news first — I don’t know exactly what the hell is going on. Good news? I have a job!

So, firstly, if your element is on the page at design time (not dynamically generated), then while the element attribute exists, css should work.

eg:.

 <!DOCTYPE html> <html> <head> <title>Example</title> <style> a:after { content: attr(title); } </style> </head> <body> <a id="targetElement" title="hi" href="http://www.google.com">Hello World</a> <script type="text/javascript"> document.getElementById("targetElement").setAttribute("title", " moo"); </script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script> </body> </html>

This example works because targetElement has a title attribute. The title is moo at runtime, and css reflects this, showing the content as "moo".

If you remove the code header = "hi", you will not see moo. FURTHERMORE, if targetElement is not on the page when you start css - you will not see moo - even if you create targetElement with an existing title attribute.

If you want to dynamically generate your elements and work with this css, I have a second workaround and I use this method. The problem is that IE8 does not find this element when it applies the pseudo selector and it does not restart its logic when the element appears.

So, if you are something like ..

 node.children('a').attr('data-content', '[' + usedRackUnits + '/' + rackTooltipInfo.rackModel.rows + ']'); var addRule = function (sheet, selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); }; addRule(document.styleSheets[0], 'li[rel="rack"] > a:after', "content: attr(data-content)");

This will change your stylesheet at runtime and add a new CSS rule. This forces IE8 to reapply the logic, and since the dynamic elements are on the page now, it finds them and applies css accordingly. Woohoo! Stupid IE8.

+1
source

Source: https://habr.com/ru/post/1488784/

More articles:


All Articles