Question

您好我已经制作了一个模板和一个完整的角色扮演游戏，有超过400页的编码，现在用户告诉我该页面无法正常工作。我用firefox和chrome浏览过我的网站，效果很好。但当我查看它时，它显示一个混乱的页面。我尝试过使用

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

但是不起作用/帮助我也有滚动条（登录时）如果您使用键盘上的左右键将页面移动到页面的左侧或右侧，则滑动条不会向下滑动。那么反正让我的模板工作，即阻止用户左右按压，例如模板从左向右移动？

这是我的css

html
{
    background: url(../images/background.png);
    background-color: transparent;

}

body {
    width: 1000px;
    margin: auto;
    padding: 0;
    text-align: center;
    color: #000000;
    font-family: verdana;
    font-size: 0.7em;
}

.auction_box
{   
display:inline-block ;
}


div.container
{   
    width:100%;
    height:100%;
    position:absolute;
    margin:auto;
}


div.holder
{
    width:990px;
    background-color:#d7f7f7;
    height:100%;
    margin:auto;
    margin-top:0px;
    background-image:url('../images/swampertbackground.png');
    background-repeat:no-repeat;
    background-position:bottom center;
}
#container{
    height: 100%;
    width: 1000px;
    background-color: #d7f7f7;
    position: fixed;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-left: solid #25a5a6 2px;
    border-right: solid #25a5a6 2px;
    overflow-y: auto;
    overflow-x: auto;
}
div.banner
{
    height:125px;
    width:700px;
    display:block;
    position:absolute;
    margin-top:2px;
    margin-left:140px;
    background-color:#FFF;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border: solid #25a5a6 1px;
    background-image:url('../images/banner.png');
    box-shadow: 3px 3px 3px #4b8384;
}

ul , li
{
    margin:0px;
    padding:0px;
    list-style:none;

}
div.left_navigation
{
    position:absolute;
    margin-left:5px;
    margin-top:150px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    width: 152px;
}

div.leftside2_navigation
{
    position:absolute;
    margin-left:5px;
    margin-top:280px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    width: 152px;
}

div.left_navigation2
{
    position:absolute;
    margin-left:5px;
    margin-top:330px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}

div.clans
{
    position:absolute;
    margin-left:5px;
    margin-top:410px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}

div.left_navigation3
{
    position:absolute;
    margin-left:5px;
    margin-top:525px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}
div.left_navigation4
{
    position:absolute;
    margin-left:5px;
    margin-top:620px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}
div.left_navigation5
{
    position:absolute;
    margin-left:5px;
    margin-top:680px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}

div.left_navigation6
{
    position:absolute;
    margin-left:5px;
    margin-top:750px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}

li.header
{
    width:150px;
    height:14px;
    background-color:#54c0c1;
    border:1px #188c8d solid;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    background-image:url('../images/header.png');
    border-left:2px #188c8d solid;
    color:#FFFFFF;
    font-weight:900;

}
li.links
{
    width:150px;
    height:16px;
    background-color:#c1f9fa;
    border-bottom:1px #188c8d solid;
    border-left:2px #188c8d solid;
    border-right:1px #188c8d solid;
    color:#074647;

}

li.links:hover
{
    background-color:#FFFF00;
    color:#296584;
    font-weight:bold;
    text-shadow: 1px 2px 2px #0096ff;

}
li.footer
{
    width:150px;
    height:9px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    background-image:url('../images/header.png');
    border-bottom:1px #188c8d solid;
    border-left:2px #188c8d solid;
    border-right:1px #188c8d solid;
}
div.centerboxholder
{   
    position:absolute;
    top:150px;
    margin-left:165px;
    width:661px;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}
div.centerbox
{   
    position:absolute;
    width:661px;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px; 
}
li.chead
{
    width:660px;
    height:14px;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    background-image:url('../images/header.png');
    border-left:2px #188c8d solid;
    border-right:1px #188c8d solid;
    border:1px #188c8d solid;
    color:#FFFFFF;
    font-weight:900;
    box-shadow: 0px 0px 3px #4b8384;
}

li.ccontent
{
    width:659px;
    background-color:#c1f9fa;
    border-bottom:1px #188c8d solid;
    border-left:2px #188c8d solid;
    color:#000;
    font-size:0.9em;
    border-right:1px #188c8d solid;
    box-shadow: 3px 3px 3px #4b8384;
}
li.cfoot
{
    width:659px;
    height:9px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    background-image:url('../images/header.png');
    border-bottom:1px #188c8d solid;
    border-left:2px #188c8d solid;
    border-right:1px #188c8d solid;
    box-shadow: 3px 3px 3px #4b8384;
}

div.right_navigation
{
    position:absolute;
    margin-left:834px;
    top:150px;
    box-shadow: 3px 3px 3px #4b8384;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
}

table
{
    padding:0px;
    margin:0px;
    border: 0px;
    font-size:0.9em;
    font-weight:bold;
    color:#000;
}

td
{
    border:1px #188c8d solid;
    width:200px;
    text-align:center;
}

#textfield
{
    color: #000000;
    font-family: verdana;
    font-size: 1em;
    font-weight: bold;
    background-color:#e2fffc;
    border:1px #188c8d solid;
    border-radius:5px;
}
#gender
{
    color: #000000;
    font-family: verdana;
    font-size: 1em;
    font-weight: bold;
    background-color:#e2fffc;
    border:1px #188c8d solid;
    border-radius:5px;
    width:110px;
    padding:0px;
}
#gendertop
{
    color: #000000;
    font-family: verdana;
    font-size: 1em;
    font-weight: bold;
    background-color:#e2fffc;
    border:1px #188c8d solid;

}
#genderbottom
{
    color: #000000;
    font-family: verdana;
    font-size:1em;
    font-weight: bold;
    background-color:#e2fffc;
    border:1px #188c8d solid;
}

#button
{
    background-color:Transperent;
    color: #000000;
    font-family: verdana;
    font-size: 1em;
    font-weight: bold;
    background-color:#e2fffc;
    border:1px #188c8d solid;
    width:100px;
    padding-top:0px;
    margin:0px;
    height:16px;
    padding-bottom:5px;
}
#Avatar
{
    color: #000000;
    font-family: verdana;
    font-size: 1em;
    font-weight: bold;
    background-color:#e2fffc;
    border:1px #188c8d solid;
    border-radius:5px;
    width:110px;
}
#changer
{
    color: #000000;
    font-family: verdana;
    font-size: 1em;
    font-weight: bold;
    background-color:#e2fffc;
    border-bottom:1px #188c8d solid;


}

li.topper
{   
    height:12px;
    border:1px #188c8d solid;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    background-image:url('../images/header.png');
}
li.bottomer
{

    border:1px #188c8d solid;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    background-image:url('../images/header.png');
    height:12px;
}

#button:hover
{
    cursor:pointer;
}
a:link { color:#296584; text-decoration:none;display:block;}
a:visited { color:#296584; text-decoration:none;}
a:hover { color:#296584; text-decoration:none;text-shadow: 1px 2px 2px #0096ff;}
a:active {color:#296584; text-decoration:none; background-color:}

我的网站网址是pokemontoxic.net，所以每个人都可以查看它，看看我的意思。感谢

Answer 1

你的文档类型错了。在页面顶部，更改此内容：

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

到此：

<!doctype html>
<html>

或者，至少交换他们的位置。

Answer 2

<强>第一

Emulate7会告诉所有IE浏览器 假装行动 ，就好像它们是IE7一样。只需删除这些行：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

而是添加以下代码，这意味着您的网站支持IE7：

<meta http-equiv="X-UA-Compatible" content="IE=7"/>

<强>第二

在您的CSS中，您有div.container和div.holder，点代表“类”，但您有<div id="container">和<div id="holder">。因此，要么将CSS更改为div#container和div#holder，要么将属性ID更改为类，例如<div class="container">和<div class="holder">

我的网站不起作用

2 个答案: