Question

我在Internet Explorer中显示我的html / css文档时出现问题，它在fire fox和chrome中运行良好，所以我想这是因为我插入了xhtml的doctype或者没有插入任何doctype HTML它不起作用，它只显示我的标题部分，我应该包括什么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它只会显示标题

Answer 1

该页面存在大量CSS错误。当您没有doctype时，页面将在Quirks Mode中处理，这意味着浏览器会模拟旧的，破碎的IE版本。添加doctype打破了这一点。例如，任何没有单位的长度表达式（0除外）都将被忽略。

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

Answer 2

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

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

width，height，left和top都应该有单位，请尝试在每个单位上添加px。 <{1}}当然不需要那样。

插入doctype html内容时不会显示

2 个答案: