Frameset не работает в IE8

Я построил набор фреймов, который предназначен для центровки веб-страницы в середине окна браузера.Frameset не работает в 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

Ну, если бы вы могли предоставить способ центрировать div в середине страницы через CSS, это не было бы необходимо. Но я еще не нашел для этого метода. – Bevin

Вы упомянули, что вы поставляете doctype во втором кодовом блоке, но в любом блоке отсутствует тип doctype. –

Нет необходимости в фрейме. Код ниже будет центрировать div на странице.

Горизонтальное центрирование выполняется путем установки левого и правого полей в положение auto. Вертикальное центрирование выполняется путем размещения верхней части 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>

Edit:
Вот код с содержанием и стилем вставил в:

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

О, мой!

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

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

Пожалуйста, не то, что установка маржинального верха на 567 пиксела только центрирования содержимого для конкретного разрешения экрана ,

если IE обидчив на тело тега, вы можете вставлять все содержимое тела с 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 #.

EDIT: Итак, теперь я вижу html-код.

Вам следует попробовать положение: относительный, а не абсолютный для ваших div и посмотреть, что происходит с последним «решением», которое я отправил.

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

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

источник

2009-03-15 16:21:42

Нет, не работает. Может быть, это связано с тем, что страница содержит отображение: абсолютные элементы и что у нее фоновое изображение? – Bevin

Нет, это, вероятно, странная обработка тела IE. Я отредактирую свой ответ с чем-то, что должно решить проблему. –

Все еще не работает. Я думаю, что контент div считает, что он пуст, потому что все остальные div внутри него настроены на отображение: absolute. И я просто понимаю, что никакое количество css на теле или контент-div не будет работать, поскольку все внутри divs абсолютно одинаковы :( – Bevin

ответ

Смежные вопросы