网站的CSS取代了iframe样式

Question

1. I work for an adtech. We show ads using iframe but for one particular website where we are showing ads my iframe height is being overriden.

2. The style that overrides my css style is as follows:-

 #story-sec .led-content .cont-bot .right-side .news-detail-landing iframe:not(.instagram-media) { width: 100% !important; height: 200px!important; margin: 5px 0px; } 

3. I create iframe dynamically using javascript. The site is overriding my css.

---

var iframe = createHtmlElement("iframe");          
setAttributesForElement(iframe, { 'vspace':'0', 'hspace':'0', 'scrolling':'no', 'id':'myIframeId', 'frameborder':'0', 'marginwidth': '0', 'marginheight': '0', 'allowtransparency':'true', } );            
setStyle(iframe, {'margin':'0px', 'width':'100%', 'height':'100%', 'padding':'0px'} );

---

So in above code setAttributes and setStyle are function that I have which take input and set style adn attributes for html elements.

4. Is there a way to avoid my css being overridden ? I tried searching for answers but got not much clarity.

5. I can set class named instagram-media for my iframe which solves the issue but the ads are placed on different sites so I might encounter same problem again. so looking for a permanent solution.

Answer 1

I had experience of work like that, so in those cases I would usually do this: - Target the iframe you created with > css pointer. - Is there any possibility to set !important flags on your styles? - Try to create a very long distinctive class name for your iframe.

Answer 2

You mentioned adding a class resolves the issue but that you're worried about, another website using that same class and again over writing your css.

Your best bet may be to simply use some really obscure class?

Like...

class="YourCompany_iframeCSS_InsertADateHere_AnAlphaNumericStringHere"