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を中央に配置します。
水平方向の中央揃えは、左右のマージンをautoに設定することにより行われます。垂直方向の中央揃えは、divの上部をページの50％下に配置し、divの高さの半分である負の上マージンを使用して中央に移動します。
html 要素と body 要素の高さも100％に指定する必要があります。そうしないと、コンテンツと同じ高さになります。
divには position：relative があり、その中に絶対位置の要素があるという問題も処理します。 divはレイヤーになります。つまり、その内部に絶対配置された要素は、ページではなくdivの左上隅をゼロポイントとして使用します。
divの境界線は、それがどこにあるかを見るためだけのものです。削除できます。
コードは、Firefox 3、IE 7、IE 8ベータおよび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>
他のヒント
ああ！
webpage.htmlファイルで次のcssを使用しても、まったく同じ結果を得ることができます。
body {
width: 1128px;
margin: auto;
margin-top: 567px;
}
margin-topを567ピクセルに設定すると、特定の画面解像度のコンテンツのみが中央に配置されることに注意してください。
IEがbodyタグに触れにくい場合は、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;
}
そして、本文に設定したすべてのcssルールをdiv＃contentに適用します。
編集：htmlコードが表示されました。
divに対して絶対ではなくposition：relativeを試して、最後の＆quot; solution＆quot;で何が起こるかを確認してください。提出しました。
また、body cssルールの以前のマージン設定をすべて削除し、背景画像をdiv＃contentルールに移動します。
...そして私に知らせてください：P
所属していません StackOverflow
