框架集在 IE8 中不起作用答案

【问题标题】：Frameset won't work in IE8框架集在 IE8 中不起作用
【发布时间】：2010-10-13 11:31:59
【问题描述】：

我已经构建了一个框架集，旨在将网页置于浏览器窗口的中间。

<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>

Blank 是一个空的 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>

【问题讨论】：

请问您的网站是否真的需要使用框架集？
好吧，如果您可以提供一种方法，通过 CSS 将 div 置于页面中间，那就没有必要了。但我还没有找到一种方法。
您提到您在第二个代码块中提供了 doctype，但两个代码块中都没有 doctype。
我说我排除了doctype和html标签。如果有误会我可以改正。
IE8 仍处于测试阶段。你应该等到它的最终版本发布。

标签： html internet-explorer-8 center frames frameset

【解决方案1】：

天哪！

您可以在您的 pages.html 文件中使用以下 css 获得完全相同的结果：

body {
  width: 1128px;
  margin: auto;
  margin-top: 567px;
}

请注意，将 margin-top 设置为 567 像素只会使您的内容在特定屏幕分辨率下居中。

如果IE对body标签敏感，可以用div嵌入body的全部内容：

然后使用下面的css：

html, body {
  width: 100%;
  text-align: center;
}

div#content {
  width: 1128px;
  margin: auto;
  margin-top: 567px;
  text-align: left;
}

现在将你为 body 设置的所有 css 规则应用到 div#content。

编辑：所以我现在看到了 html 代码。

您应该为您的 div 尝试 position:relative 而不是 absolute，看看我提交的最后一个“解决方案”会发生什么。

另外，在你的 body css 规则中删除所有之前的边距设置，并将背景图像移动到 div#content 规则中。

...让我知道：P

【讨论】：

不，不起作用。这可能与页面包含 display:absolute 元素和背景图片有关吗？
不，这可能是 IE 对 body 的奇怪处理。我会用应该解决问题的东西来编辑我的答案。
还是不行。我认为内容 div 认为它是空的，因为它里面的所有其他 div 都设置为 display:absolute。而且我只是意识到，body 或 content div 上的任何 css 都不会起作用，因为所有内部 div 无论如何都是绝对的 :(
嗯，意思是位置：绝对。
是的，我试过了。整个内容 div 刚刚下移了 567px，视频 div 完全放错了位置。

【解决方案2】：

不需要框架集。下面的代码将在页面中居中放置一个 div。

水平居中是通过将左右边距设置为自动来完成的。垂直居中是通过将 div 的顶部放在页面下方 50% 的位置完成的，然后使用 div 高度一半的负上边距将其向上移动到中心。

还需要将html和body元素的高度指定为100%，否则只会和内容一样高。

div 有position:relative，它还可以解决您在其中的绝对定位元素的问题。 div 变成了一个层，这意味着其中任何绝对定位的元素都将使用 div 的左上角作为零点，而不是页面。

div上的边框只是看它在哪里。您可以删除它。

代码在 Firefox 3、IE 7、IE 8 beta 和 Opera 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>

【讨论】：

谢谢，我真的没办法了 :)
对不起，它不起作用。里面的元素还在原来的位置，背景图片神奇地消失了（即使我把背景图片放到了Content类里）。
我在页面中粘贴了您的内容和样式（如上所示），效果很好。背景图像在那里，并且 div 位于 Content div 内。
背景图也必须居中（忘了说……好像是我一直在做的事），而不是放在body里面。
只需将 background-image 更改为背景，并在 url() 之后添加重复 (repeat-x/repeat-y/no-repeat) 和水平和垂直定位（例如 center center）。