Chrome 和 Safari iframe 彼此重叠，而不是并排
我知道，iframe 真是个 PITA！
不管怎样，它们满足了我的需求，这只是一个主显示框架和一个隐藏的侧框架，其中包含可以随时调用的应用程序。
这是代码：
<html>
<head>
<!--Main Style-->
<link rel="stylesheet" type="text/css" href="site/css/main.css" />
<!--JQuery-->
<script type="text/javascript" src="site/scripts/jquery.js"></script>
<!--BG Colour, Hide Scrollbar and Margins-->
<body bgcolor="cc6666" style="overflow: hidden" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<!--Page Table, Contains Everything To Keep From Cutting Off iFrame-->
<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
<!--iFrame Cell-->
<td height="100%">
<!--Main Frame-->
<!--Main frame loads last visited page based on user, unless not logged in then loads welcome page-->
<?php
if(isset($_SESSION['last_visited'])) {
print('<iframe name="frame" src="'.$_SESSION['last_visited'].'" width="100%" height="100%" frameborder="0" style="bgcolor:white;"></iframe>');
}
else {
print('<iframe name="frame" src="site/welcome.php" width="100%" height="100%" frameborder="0"></iframe>');
}
?>
<!--App Frame-->
<!--App frame will be initiated if no user is logged in, or if a user with apps turned on is logged in-->
<?php
if(isset($_SESSION['SESS_APPS'])) {
if($_SESSION['SESS_APPS'] == '1') {
print('<iframe id="app_frame" src="site/apps.php" width="0%" height="100%" frameborder="0" scrolling="no"></iframe>');
}
}
else {
print('<iframe id="app_frame" src="site/apps.php" width="0%" height="100%" frameborder="0" scrolling="no"></iframe>');
}
?>
<!--End iFrame Cell-->
</td>
<!--End Page Table-->
</table>
</body>
希望这不是太糟糕，但错误似乎肯定发生在底部附近，在那里你有使用 php 打印的两个 iframe。如果我完全删除“App Frame”，该页面是完美的，正如我在 IE 中测试的那样，但如果它打印 iframe，那么由于某种原因它会将其打印在主框架下方，而不是右侧。
这种情况只发生在 Chrome 和 Safari 中，并假设它一定是 WebKit 的东西，因为 Firefox 和 IE 并排打印框架，正如您所期望的那样。
正如我所相信的，html 是从左到右工作的，除非有某种中断，此时它会下降到下一行。
我认为在这种情况下不会发生这种情况的唯一原因是主单元格的宽度为 100%，这意味着它右侧的任何内容都被推到下面的行上。
谁能建议一种方法，让我可以镜像 Chrome 和 Safari 的 IE 渲染？
注意：我认为它对这么远的页面没有任何影响，但整个页面是一个表，分为两行。最上面一行是一个表格，控制标题的布局。第二行是另一个表格，控制框架的布局。
这是因为它允许页面根据用户分辨率以及窗口大小动态调整。
I know, iframes, what a PITA!
Anyhoos, they work for my needs which are simply a main display frame, and a hidden side frame containing apps that can be called in at any time.
Here is the code:
<html>
<head>
<!--Main Style-->
<link rel="stylesheet" type="text/css" href="site/css/main.css" />
<!--JQuery-->
<script type="text/javascript" src="site/scripts/jquery.js"></script>
<!--BG Colour, Hide Scrollbar and Margins-->
<body bgcolor="cc6666" style="overflow: hidden" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<!--Page Table, Contains Everything To Keep From Cutting Off iFrame-->
<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
<!--iFrame Cell-->
<td height="100%">
<!--Main Frame-->
<!--Main frame loads last visited page based on user, unless not logged in then loads welcome page-->
<?php
if(isset($_SESSION['last_visited'])) {
print('<iframe name="frame" src="'.$_SESSION['last_visited'].'" width="100%" height="100%" frameborder="0" style="bgcolor:white;"></iframe>');
}
else {
print('<iframe name="frame" src="site/welcome.php" width="100%" height="100%" frameborder="0"></iframe>');
}
?>
<!--App Frame-->
<!--App frame will be initiated if no user is logged in, or if a user with apps turned on is logged in-->
<?php
if(isset($_SESSION['SESS_APPS'])) {
if($_SESSION['SESS_APPS'] == '1') {
print('<iframe id="app_frame" src="site/apps.php" width="0%" height="100%" frameborder="0" scrolling="no"></iframe>');
}
}
else {
print('<iframe id="app_frame" src="site/apps.php" width="0%" height="100%" frameborder="0" scrolling="no"></iframe>');
}
?>
<!--End iFrame Cell-->
</td>
<!--End Page Table-->
</table>
</body>
Hopefully that's not too bad, but the error definitely seem to occur near the bottom, where you have the two iframes printed using php. If I remove the "App Frame" completely, the page is perfect, as I had tested in IE, but if it prints the iframe, then for some reason it prints it below the main frame, rather than to the right.
This happens only in Chrome and Safari, and assume it must be a WebKit thing, as Firefox and IE print the frames side by side, as you would expect.
As I have come to believe, html works on a basis of left to right, unless there is some kind of break at which point it drops down to the next row.
The only reason I can think that in this case that is not what happens, is that the main cell has a width of 100%, meaning antyhing to the right of it is pushed onto the row below.
Can anyone suggest a way I can perhaps mirror the rendering from IE for Chrome and Safari?
NOTE: I don't think it has any bearing on the page this far down, but the entire page is one table, split into two rows. the top row is a table, controlling the layout of my header. The second row is another table, controlling the layout of the frame.
This is because it allows the page to adjust dymaically based on a users resolution, and therefore window size.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
通过基于父表格单元格以固定宽度扭曲表格单元格中的每个 iframe 来修复此问题。
Fixed this by warpping each iframe in a table cell with a fixed width based on parent table cell.