Let me start by clarifying that I am not looking to add extra CSS to the contents of an iframe from the parent document. My issue lies with a document that normally displays correctly but experiences styling issues when shown in an iframe. Whenever I search for a solution, all I find is information about applying CSS to iframes.
I have an HTML document that functions perfectly on its own in a browser, but when placed inside an iframe, it seems to selectively apply CSS properties. For instance, in the provided fiddle link, you can see that list items within the iframe have a border-bottom property set, while the code actually contains additional border properties like border-left and border-right which are being ignored. This inconsistency occurs throughout the document.
This behavior is truly baffling to me. Some CSS properties within the same selector work fine while others are disregarded. The document works flawlessly outside of an iframe.
It's worth mentioning that the code is loaded from a data string rather than a URL due to it being rendered from an ejs template and not intended for public access. However, this detail should not affect the issue at hand.