0

我在 Internet Explorer 中显示我的 html/css 文档时遇到问题，它在 firefox 和 chrome 中运行良好，所以我猜这是因为我没有插入任何 doctype，当我插入 xhtml 或 html 的 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" />

它不工作。这是我工作的代码：

<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 版本。添加一个文档类型打破了这一点。例如，任何没有单位的长度表达式，除了 0，都会被忽略。

您需要决定是否希望修复（或重写）代码以符合 HTML 和 CSS 规范或使用 Quirks 模式。

于 2012-10-22T15:59:34.620 回答
0

唯一应该使用的 DOCTYPE 是<!DOCTYPE html>.

我怀疑是缺少单位。我猜 IE 没有使用px这里的默认值。

width, height,left并且top应该都有单位，尝试px在每个单位上添加一个。z-index当然不需要那个。

于 2012-10-22T15:13:29.017 回答