框架不会在IE8工作
https://stackoverflow.com/questions/648061
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我构建这是指在浏览器窗口的中间居中的网页框架集。
<html>
<frameset rows="100%,567px,100%" border="0">
<frame src="blank.html" noresize="noresize" scrolling="yes">
<frameset cols="100%,1128px,100%" border="0">
<frame src="blank.html" noresize="noresize">
<frame src="webpage.html" noresize="noresize">
<frame src="blank.html" noresize="noresize">
</frameset>
<frame src="blank.html" noresize="noresize" scrolling="yes">
<noframes>
<body>Page requires a frame-supporting browser.</body>
</noframes>
</frameset>
</html>
空白是一个空的HTML文档。这出色的作品在Firefox和IE6，但在IE8它只是显示一个白色的页面，即包含blank.html。为什么不表示相同的Firefox？
编辑：这能明显没有我的代码来解决，所以这里是，与DOCTYPE和HTML标签和排除的几个其他位。我已经试过您的解决方案，但它仍然没有垂直居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(xxxbackground.gif);
}
#divInteraction {
position:absolute;
width:640px;
height:480px;
z-index:1;
left: 460px;
top: 47px;
overflow: hidden;
}
#divVideo {
position:absolute;
width:424px;
height:284px;
z-index:2;
left: 13px;
top: 101px;
overflow: visible;
}
#imgInteraction {
}
#iframeInteraction {
display: none;
}
-->
</style>
</head>
<body>
<div id="divInteraction">
<iframe id="iframeInteraction" width="100%" height="100%" ></iframe>
<img id="imgInteraction" src="powerpoint_pic_0.jpg" />
</div>
<div id="divVideo">
<object id="wmvVideo" width="424" height="284" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby="" type="application/x-ms-wmp" VIEWASTEXT>
<param name="AutoSize" value="false" />
<param name="ShowStatusBar" value="0" />
<param name="DefaultFrame" value="x" />
<param name="ShowControls" value="1" />
<param name="ShowAudioControls" value="1" />
<param name="ShowPositionControls" value="0" />
<param name="ShowTracker" value="1" />
<param name="ShowDisplay" value="0" />
<param name="ShowCaptioning" value="0" />
<param name="ShowGoToBar" value="0" />
<param name="ControlType" value="2" />
<param name="Autostart" value="1" />
<param name="InvokeUrls" value="1" />
<param name="AnimationAtStart" value="0" />
<param name="TransparentAtStart" value="0" />
<param name="SendStateChangeEv" value="1" />
<param name="SendOpenChangeEv" value="1" />
<param name="SendPlayChangeEv" value="1" />
<param name="AllowChangeCtrlType" value="1" />
<param name="AllowChangeDisplaySize" value="1" />
<param name="AllowScan" value="1" />
<param name="AutoRewind" value="1" />
<param name="PlayCount" value="1" />
<param name="Volume" value="0" />
<param name="Filename" value="http://www.example.com/example/example.wmv"/>
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/windows/windowsmedia/download/"
name="Player1NS"
AutoSize="false"
ShowStatusBar="0"
DefaultFrame="x"
ShowControls="1"
ShowTracker="1"
ShowDisplay="0"
ShowCaptioning="0"
ShowGoToBar="0"
Autostart="1"
AnimationAtStart="0"
TransparentAtStart="0"
PlayCount="1"
Volume="0"
Filename="http://www.example.com/example/example.wmv"
ShowAudioControls="1"
ShowPositionControls="0"
width="424"
height="284">
<br />
</embed>
</object>
</div>
</body>
</html>
解决方案
没有需要一个框架集。下面的代码将在页面居中一个div。
在水平定心是由左右边距设定为自动完成。垂直定心是通过将div的顶部50％的页面向下进行，然后使用负顶部裕度是div的高度的一半，以将其移动到中央。
您还需要指定html和body元件以100％的高度，否则会仅高达内容。
在div有position:relative这也与它里面绝对定位的元素需要你的问题的关心。在div成为层，这意味着在其内部的任何绝对定位的元件将使用div的左上角作为原点，而不是页。
在DIV的边框是只看到它在哪里。你可以删除。
的代码在Firefox 3，IE 7，IE 8β和歌剧9。测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://data.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Center</title>
<style type="text/css">
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; }
.Content {
width: 1128px; height: 567px;
margin: -283px auto 0; position: relative; top: 50%;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="Content">
</div>
</body>
</html>
编辑：结果 下面是与内容和风格中的代码粘贴：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://data.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; background-image: url(xxxbackground.gif); }
.Content { width: 1128px; height: 567px; margin: -283px auto 0; position: relative; top: 50%; }
#divInteraction {
position:absolute;
width:640px;
height:480px;
z-index:1;
left: 460px;
top: 47px;
overflow: hidden;
}
#divVideo {
position:absolute;
width:424px;
height:284px;
z-index:2;
left: 13px;
top: 101px;
overflow: visible;
}
#imgInteraction {
}
#iframeInteraction {
display: none;
}
</style>
</head>
<body>
<div class="Content">
<div id="divInteraction">
<iframe id="iframeInteraction" width="100%" height="100%" ></iframe>
<img id="imgInteraction" src="powerpoint_pic_0.jpg" />
</div>
<div id="divVideo">
<object id="wmvVideo" width="424" height="284" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby=""
type="application/x-ms-wmp" VIEWASTEXT>
<param name="AutoSize" value="false" />
<param name="ShowStatusBar" value="0" />
<param name="DefaultFrame" value="x" />
<param name="ShowControls" value="1" />
<param name="ShowAudioControls" value="1" />
<param name="ShowPositionControls" value="0" />
<param name="ShowTracker" value="1" />
<param name="ShowDisplay" value="0" />
<param name="ShowCaptioning" value="0" />
<param name="ShowGoToBar" value="0" />
<param name="ControlType" value="2" />
<param name="Autostart" value="1" />
<param name="InvokeUrls" value="1" />
<param name="AnimationAtStart" value="0" />
<param name="TransparentAtStart" value="0" />
<param name="SendStateChangeEv" value="1" />
<param name="SendOpenChangeEv" value="1" />
<param name="SendPlayChangeEv" value="1" />
<param name="AllowChangeCtrlType" value="1" />
<param name="AllowChangeDisplaySize" value="1" />
<param name="AllowScan" value="1" />
<param name="AutoRewind" value="1" />
<param name="PlayCount" value="1" />
<param name="Volume" value="0" />
<param name="Filename" value="http://www.xxx.com/xxx/xxx.wmv"/>
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/windows/windowsmedia/download/"
name="Player1NS"
AutoSize="false"
ShowStatusBar="0"
DefaultFrame="x"
ShowControls="1"
ShowTracker="1"
ShowDisplay="0"
ShowCaptioning="0"
ShowGoToBar="0"
Autostart="1"
AnimationAtStart="0"
TransparentAtStart="0"
PlayCount="1"
Volume="0"
Filename="http://www.xxx.com/xxx/xxx.wmv"
ShowAudioControls="1"
ShowPositionControls="0"
width="424"
height="284">
<br />
</embed>
</object>
</div>
</div>
</body>
</html>
其他提示
哦，我的！
您可以在您的webpage.html文件下面的CSS实现完全相同的结果：
body {
width: 1128px;
margin: auto;
margin-top: 567px;
}
请不就是边距设置为567像素将唯一的中心内容为特定的屏幕分辨率。
如果IE是在身体上标记敏感，可以嵌入主体的整个内容与一个div：
<body>
<div id="content" >
<-- YOUR CONTENT -->
</div>
<body>
然后使用以下的CSS：
html, body {
width: 100%;
text-align: center;
}
div#content {
width: 1128px;
margin: auto;
margin-top: 567px;
text-align: left;
}
现在适用所有你曾经为身体DIV＃内容的CSS规则。
编辑：因此我现在看到的HTML代码
。您应该尝试的位置是：相对的而不是绝对为你的div并看到最后的“解决方案”我提交了会发生什么
。此外，删除所有以前的页边距设置在你的身体CSS规则和背景图像移动到div＃内容规则。
...让我知道：P
不隶属于 StackOverflow
