Default width/height of an IFrame

问题:

Is there any spec specifying the default width/height of an IFrame?

Browsers I tested (FF, IE, Chrome) seem to use 300x150px but I couldn't find any spec on this. Should I ever come in the situation, can I rely on these values or should I always set width/height explicitly?

回答1:

I found the answer on the dev-tech-layout mailing list -- it's part of the CSS spec. The default ratio is 2:1.

The default width of 300px is defined in the last paragraph of the CSS spec, section on the width of inline replaced elements.

Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.

The default height of 150px is defined in the last paragraph of the CSS spec, section on the height of inline replaced elements.

Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'height' must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.

回答2:

I would set the width and height explicitly to ensure consistent rendering across multiple browsers/platforms as there is no guarantee that every browser will implement the same default dimensions.

<iframe src="iframePage.html" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>