iframe width属性被忽略

Question

我想在工具提示中嵌入幻灯片共享演示文稿。 一般我希望我的提示根据其内容动态地改变它们的高度/宽度，因此我设置（在我的CSS中）

width:auto;
height:auto;

我希望得到iframe的内联宽度属性所指示的工具提示的宽度。

见http://jsfiddle.net/elewinso/eNfHZ/

Answer 1

width: auto的含义取决于元素的属性，在这种情况下，它意味着300px，根据CSS 2.1规范的10.3.1条款。 iframe元素没有固有宽度，您不能（在CSS中）使其宽度取决于iframed文档的内容。 iframe的一个想法是，iframed文档是自主渲染的，与框架文档的设置无关，除了后者在内联框架上设置尺寸，但需要将它们设置为自己的上下文（不包括iframed文档的内容）。

因此，如果您希望平滑地呈现工具提示，请不要使用iframe。而是在主文档中使用内容（静态或脚本生成）。

如果您只想让width元素上的HTML iframe属性生效，请不要在CSS中覆盖它。 元素的width属性的任何设置都会使width属性无效。

Answer 2

100％宽度有效：

div.sttip iframe{
    width: 100%;
    height: auto;
}

http://jsfiddle.net/eNfHZ/1/

你将无法保持宽高比，你必须使用Javascript来使用onResize事件处理程序计算高度。