0

Internet Explorer で html/css ドキュメントを表示する際に問題がありました。それは fire fox と chrome でうまく機能しているので、xhtml または html の doctype を挿入すると、doctype を挿入しなかったことが原因だと思います。動作しません。ヘッダー セクションだけが表示されます。doctype には何を含める必要がありますか?

私はこれを試しました：

    <!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=utf-8" />

そして、それは機能していません.hereが機能している私のコードです:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>bazar</title>
<style type="text/css">

#container {
width: 770px;
margin: 0 auto
}
#main
{
width:100%;
height:100%;
up:0;
bottom:0;
margin:0;
}
#header
{
position:fixed;
background:url(header_slice.png);
repeat x;
width:100%;
height:63px;
top:0;
left:0;
right:0;
}
#logo
{
position:fixed;
background:url(logo.png);
width:192;
height:59;
float:right;
left:900;
}
#mymenu
{
position:fixed;
background:url(menu.png);
width:302;
height:19;
top:30;
left:122.5;
overflow:auto;
}
#mytext
{
position:fixed;
background:url(textbox.png);
width:257;
height:20;
top:30;
left:460;
}
#nav{
position:absolute;
background:url(navigation_slice.jpg);
repeat x;
width:100%;
height:148;
top:63;
z-index:1000;
left:0;
right:0;
}
#mycontainer
{
position:absolute;
background:white;
repeat x;
repeat y;
width:100%;
height:1281;
top:210;
left:0;
right:0;
}
#menu2
{
position:absolute;
background:url(navbar.png);
repeat x;
width:952;
height:67;
top:40;
left:125;
}
#home
{
position:absolute;
background:url(home.png);
width:52;
height:36;
top:30;
left:0;
}
#pencil{
position:absolute;
background:url(pencil.png);
width:39;
height:42;
top:7;
right:23;
}
#archive{
position:absolute;
background:url(archive.png);
width:38;
height:37;
top:7;
right:110;
}
#sep1{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:78;
}
#sep2{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:173;
}
#sep3{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:284;
}
#sep4{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:388;
}
#sep4{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:459;
}
#sep4{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:386;
}
#sep5{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:459;
}
#sep6{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:526;
}
#sep7{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:596;
}
#sep8{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:670;
}
.sep{
background:url(sep.png);
}
#seminar
{
position:absolute;
background:url(seminar.png);
right:204;
width:45;
height:33;
top:7;
}
#learn
{
position:absolute;
background:url(learning.png);
right:312;
width:44;
height:36;
top:7;
}
#art{
position:absolute;
background:url(art.png);
width:45;
height:40;
top:5;
right:400;
}
#engineer{
position:absolute;
background:url(engineer.png);
width:54;
height:36;
top:7;
right:470;
}
#publish{
position:absolute;
background:url(publish.png);
width:49;
height:38;
top:7;
right:539;
}
#new{
position:absolute;
background:url(new.png);
width:36;
height:31;
top:7;
right:610;
}
#contact
{
position:absolute;
background:url(contact.png);
width:178;
height:58;
top:17;
right:610;
left:125;
}
#rect1
{
width:716;
height:308;
top:-35;
left:125;
}
#rect2
{
width:226;
height:308;
top:-35;
left:850;
}
.rect
{
position:absolute;
background:url(rect.png);
repeat x;
repeat y;
}
#special
{position:absolute;
background:url(special.png);
width:696;
height:255;
top:-30;
left:132;
z-index:1000;
}
#chasb
{
position:absolute;
background:url(chasb.png);
width:56;
height:62;
top:50;
right:300;
z-index:1000;
}


#takhte
{
position:absolute;
background:url(takhte.png);
width:51;
height:58;
top:170;
right:300;
z-index:1000;
}
#sabad1{
position:absolute;
width:80;
height:17;
top:210;
right:370;
z-index:1000;
}
#sabad2{
position:absolute;
width:80;
height:17;
top:90;
right:370;
z-index:1000;
}
.sabad
{
background:url(sabad.png);
}

#left
{
position:absolute;
background:url(slideleft.png);
top:280;
left:125;
width:20;
height:69;
z-index:2000;
}
#right
{
position:absolute;
background:url(slideright.png);
top:280;
left:822;
width:17;
height:69;
z-index:2000;
}
#slide
{
position:absolute;
top:280;
left:125;
width:716;
height:69;
z-index:1500;
}
#staff
{
position:absolute;
background:url(staff.png);
width:228;
height:70;
top:280;
z-index:1000;
left:850;
}
#mybox
{
position:absolute;
background-color: white;
top:0;
left:865;
width:200;
height:260;
z-index:900;
}
#product
{
position:absolute;
background:url(products.png);
width:200;
height:76;
top:-30;
left:865;
z-index:1000;
}
</style>
</head>
<body>
<div id='main'>
<div id='header'>
<div id='logo'></div>
<div id='mymenu'></div>
<div id='mytext'></div>
<div id='nav'>
<div id='menu2'>
        <div id='home'></div><div id="pencil"></div>
        <div id="sep1" class="sep"></div><div id="archive"></div>
        <div id="sep2" class="sep"></div><div id="seminar"></div>
        <div id="sep3" class="sep"></div><div id="learn"></div>
        <div id="sep4" class="sep"></div><div id="art"></div>
        <div id="sep5" class="sep"></div><div id="engineer"></div>
        <div id="sep6" class="sep"></div><div id="publish"></div>
        <div id="sep7" class="sep"></div><div id="new"></div><div id="sep8" class="sep"></div>
</div>
<div id='contact'></div>
</div>

</div>

<div id='mycontainer'>

<div id='rect1' class='rect'></div>
<div id='rect2' class='rect'></div>
<div id='special'></div>
<div id='chasb'></div><div id='takhte'></div><div id='sabad1' class="sabad"></div><div id='sabad2' class="sabad"></div>
<div id='mybox'></div>
<div id='product'></div>
<div id='staff'></div>
<div id='slide' class="rect"></div>
<div id='left'></div><div id='right'></div>
</div>

</div>

</body>
</html>

doctypeを含めることで言ったように、ヘッダーを表示するだけです

4

2 に答える 2

1

ページに多数の CSS エラーがあります。Doctype がない場合、ページはQuirks Modeで処理されます。これは、ブラウザーが古い壊れたバージョンの IE をエミュレートすることを意味します。doctype を追加すると、これが壊れました。たとえば、0 以外の単位のない長さ式は無視されます。

HTML および CSS 仕様に準拠するようにコードを修正 (または書き直し) するか、Quirks モードで遊ぶかを決定する必要があります。

于 2012-10-22T15:59:34.620 に答える
0

使用する必要がある唯一の DOCTYPE は<!DOCTYPE html>.

ユニット不足だと思います。IE はここのデフォルト値を使用していないと思いpxます。

width、height、leftおよびtopすべてにユニットがあるはずpxです。それらのそれぞれに a を追加してみてください。z-indexもちろんそれは必要ありません。

于 2012-10-22T15:13:29.017 に答える