Frameset не будет работать в IE8

https://stackoverflow.com/questions/648061

22-07-2019
|

Вопрос

Я создал набор фреймов, который предназначен для центрирования веб-страницы в середине окна браузера.

<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 просто показывает белую страницу, а именно пустую страницу.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 и 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>

Другие советы

О боже!

Точно такой же результат можно получить с помощью следующего файла CSS в файле webpage.html:

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

Обратите внимание, что установка поля на верхнем крае в 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 и посмотреть, что произойдет с последним " решением " Я представил.

Кроме того, удалите все предыдущие настройки полей в правиле body css и переместите фоновое изображение в правило содержимого div #.

... и дай мне знать: P

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow