Geek Answers Handbook

Iframes rendering mysteriously different from regular web pages?

I have a problem where the iframe rendering is different from the pages outside the iframe. This happens in Chrome and Firefox. I really need to make the iframe appear the same as the regular main page. I am in a situation where I cannot change the contents inside the iframe.

Two examples:

Example 1: Fields Above H1s

Code (this is the whole HTML file):

<h1>hello</h1>

<br><br>

<iframe srcdoc="<h1>hello</h1>"></iframe>

Screenshot:

Screen shot 1

Problem:

Too much stock above H1 in the iframe. I need them to fit together. And in particular, I need h1 inside the iframe to match. And this cannot be a specific CSS hack for this particular situation. I know that here I can modify the iframe code to crack it using CSS. But why is this done differently?

Example 2: Missing 'px' specification in css

Code (this is the whole HTML file):

<div style='border:1px solid black;width:30px;height:30px;border-radius:30'></div>

<br><br>

<iframe srcdoc="<div style='border:1px solid black;width:30px;height:30px;border-radius:30'></div>"></iframe>

Screenshot:

Screenshothot 2

Problem:

iframe border-radius , "px". iframe . , , 'px' iframe, , , . iframe , ?

+2
1

( , Quirks) iframe. srcdoc html5, iframe html5.

html5, <!DOCTYPE html>, , .

, doctype srcdoc, . , , .

+2

More articles:


All Articles