1

我正在尝试显示几个 iframe，使它们都占据屏幕的宽度，但左侧的第一个 iframe 仅足够宽以显示其所有内容。我见过几个使用 javascript 的解决方案，但我不明白为什么这是必要的，我真的很想只使用 CSS3 来完成它。

我一直在阅读一些 CSS3 规范（http://www.w3.org/TR/css3-box/#Calculating），虽然有点难以理解，但似乎应该使用“缩小以适应" 如果我​​指定一个自动宽度。但是，它不这样做。例如，在下面的代码中，frame1.html 包含与第二个表中的第一个 td 相同的内容，而 frame2.html 包含与第二个表中的第二个 td 相同的内容：

<!doctype html>
<html>
<head>
<title>Frame Test</title>
</head>
<body>
<table>
<tr>
<td><iframe src="frame1.html"></iframe></td>
<td><iframe src="frame2.html"></iframe></td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>Goodbye ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</td>
</tr>
</table>
</body>
</html>

但是，左侧 iframe 中有一堆额外的空间。为什么？我最好的猜测是，iframe 以某种方式在外部标签（例如 html 或 body 标签）中插入了额外的空间，这似乎不太可能，因为萤火虫说大部分空间都在实际文本中，或者自动宽度计算不知何故与 iframe 不同，与 td 不同。（对所涉及的算法进行清晰、易于理解的解释会很好！）我已经尝试了各种宽度和高度设置，一直传播到 html 标记，但我似乎无法得到任何工作。

为什么它不缩小以适应，所以它只使用其元素实际占用的空间？

4

1 回答 1

1

我想这是因为 aniframe实际上并不包含HTML/CSS 意义上的“内容”。

It's easy to style things on the actual DOM, and that's what CSS is for. But an iframe is a window to a completely different DOM, independent of the parent. The parent page has no knowledge of the "contents" of the iframe and therefore can't style the dimensions of the iframe to match those contents.

As many, many people will suggest... You should really try to avoid frames. In my experience they're more trouble than they're worth. It's considerably easier to maintain the styles and behaviors within a single DOM.

于 2012-07-08T06:27:19.747 回答