フレームセットはIE8では機能しません

ブラウザウィンドウの中央にウェブページを中央に配置するためのフレームセットを作成しました。フレームセットはIE8では機能しません

<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と同じように表示されないのはなぜですか？

EDIT：これは明らかに私のコードなしでは解決できないかもしれないので、ここで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>

出典

2009-03-15 Bevin

フレームセットの使用があなたのウェブサイトのために本当に必要であるなら、私はあなたを聞いてさせてください！ – markus

CSSを使ってページの中央にdivを配置する方法があれば、それは必要ではありません。しかし、私はまだそれのための方法を見つける必要があります。 – Bevin

2番目のコードブロックにdoctypeを指定していますが、どちらのブロックにもdoctypeはありません。 –

フレームセットの必要はありません。下のコードは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>

出典

2009-03-15 18:49:32 Guffa

ありがとう、私は本当にアイデアを実行していませんでした:) –

申し訳ありません、。内側の要素はまだ元の位置にあり、背景画像は魔法のように消えてしまっています（Contentクラスに背景画像を置いても）。 – Bevin

あなたのページにコンテンツとスタイルを貼り付けました（上に掲載）。背景画像はそこにあり、divはContent div内に配置されます。 – Guffa

Oh my！

あなたのwebpage.htmlファイルで、次のCSSとまったく同じ結果を得ることができます。

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

してくださいではない567ピクセルにマージントップを設定するだけで、特定の画面解像度のためにあなたのコンテンツを中心に説明すること。

IEはbodyタグに厄介であるならば、あなたはdiv要素で身体の全体コンテンツを埋め込むことができますが：

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

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

そして今、すべて適用されます：

 
    <body> 
     <div id="content" > 
     <-- YOUR CONTENT --> 
     </div> 
    <body>

そして、次のCSSを使用します＃コンテンツをdivにするためにあなたが持っていたCSSルール。

編集：今すぐhtmlコードが表示されます。

あなたのdivの絶対的ではなく相対的な位置を試して、最後に提出した「解決策」がどうなるかを見てください。

また、body cssルールの以前のマージン設定をすべて削除し、背景イメージをdiv＃コンテンツルールに移動します。

...私に教えてください：P

出典

2009-03-15 16:21:42

いいえ、動作しません。ページに表示：絶対要素が含まれ、背景イメージがあるという事実とは関係がありますか？ – Bevin

いいえ、恐らくIEによる奇妙な身体の扱いでしょう。問題を解決する必要があるもので私の回答を編集します。 –

まだ動作しません。私は、コンテンツdivは空であると信じていると思います。その中の他のdivのすべてが表示されるように設定されているからです。そして、私は、body divやdiv divのすべてのdivが機能しないことを認識しています。（ – Bevin

フレームセットはIE8では機能しません

答えて

関連する問題