Il set di frame non funzionerà in IE8

StackOverflow https://stackoverflow.com/questions/648061

Domanda

Ho creato un set di frame che ha lo scopo di centrare una pagina web al centro della finestra del browser. 

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

Vuoto è un documento HTML vuoto. Funziona in modo brillante sia in Firefox che in IE6, ma in IE8 mostra semplicemente una pagina bianca, ovvero il blank.html. Perché non mostra lo stesso di Firefox?

EDIT: Evidentemente questo non potrebbe essere risolto senza il mio codice, quindi eccolo qui, con i tag doctype e html e pochi altri bit esclusi. Ho provato la tua soluzione, ma non si centra ancora verticalmente. 

<!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>
È stato utile?

Soluzione

Non è necessario un set di frame. Il codice seguente centrerà un div nella pagina.

La centratura orizzontale viene eseguita impostando i margini sinistro e destro su auto. Il centraggio verticale si ottiene posizionando la parte superiore del div 50% in basso nella pagina, quindi utilizzare un margine superiore negativo che è metà dell'altezza del div per spostarlo verso il centro.

Devi anche specificare l'altezza degli elementi html e body al 100%, altrimenti saranno alti solo quanto il contenuto.

Il div ha position: relative che si occupa anche del tuo problema con elementi assolutamente posizionati al suo interno. Il div diventa un livello, il che significa che qualsiasi elemento posizionato al suo interno utilizzerà l'angolo superiore sinistro del div come punto zero, non come pagina.

Il bordo sul div è solo per vedere dove si trova. Puoi rimuoverlo.

Il codice è testato in Firefox 3, IE 7, IE 8 beta e 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>

Modifica:
Ecco il codice con i contenuti e lo stile incollati in: 

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

Altri suggerimenti

Oh mio Dio!

Puoi ottenere lo stesso esatto risultato con i seguenti css nel tuo file webpage.html: 

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

Non impostare il margine superiore su 567 pixel per centrare i contenuti solo su una risoluzione dello schermo specifica.

se IE è sensibile al tag body, puoi incorporare l'intero contenuto del body con un div: 

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

Quindi utilizzare i seguenti css: 

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

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

E ora applica tutte le regole css che avevi per il corpo per div # content.

MODIFICA: vedo ora il codice html.

Dovresti provare position: relative invece di absolute per i tuoi div e vedere cosa succede con l'ultima "soluzione". Ho inviato.

Inoltre, rimuovi tutte le tue precedenti impostazioni di margine nella regola css del tuo corpo e sposta l'immagine di sfondo nella regola del contenuto div #

... e fammi sapere: P

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top