如何解决歌剧的布局问题只适用于小提琴，而不能用于实时网站-
||<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<title>Look Around You</title>
</head>
<body>
<div id=\"fade\"></div>
<div id=\"wrapper\">
<div id=\"header\">
<div id=\"logo\">
<h1><a href=\"http://lookaroundyou.net\">Look Around You</a></h1>
</div>
<div id=\"search\">
<input type=\"text\"/>
<input type=\"button\" value=\"search\"/>
</div>
<p class=\"clear\"/>
<div id=\"horNav\">
<ul class=\"horNav\">
<li><a class=\"home\" href=\"#\">HOME</a></li>
<li><a class=\"submit\" href=\"#\">SUBMIT</a></li>
</ul>
<ul class=\"horLeft\">
<li><a class=\"tags\" href=\"#\">TAGS</a></li>
</ul>
<ul class=\"advertisment\">
<li ><a class=\"contact\" href=\"#\">CONTACT</a></li>
</ul>
<ul class=\"horRight\">
<li><a class=\"hello\" href=\"#\">HELLO</a></li>
</ul>
</div>
</div>
<div id=\"posts\">
<p></p>
</div>
<div id=\"verNav\">
<p></p>
<div id=\"category\">
<ul></ul>
</div>
<div id=\"country\">
<ul></ul>
</div>
</div>
<div id=\"adverts\">
<p>adverts</p>
</div>
<div id=\"footer\">
<ul class=\"horNav\">
<li class=\"horNav\"><a href=\"#\">TOP</a></li>
</ul>
</div>
</div>
</body>
</html>
@font-face {
font-family: \'QuicksandBook\';
src: url(\'Quicksand_Book-webfont.eot\');
src: url(\'Quicksand_Book-webfont.eot?#iefix\') format(\'eot\'),url(\'Quicksand_Book-webfont.woff\') format(\'woff\'),url(\'Quicksand_Book-webfont.ttf\') format(\'truetype\'),url(\'Quicksand_Book-webfont.svg#webfontQNKLE8Me\') format(\'svg\');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: \'QuicksandBold\';
src: url(\'Quicksand_Bold-webfont.eot\');
src: url(\'Quicksand_Bold-webfont.eot?#iefix\') format(\'eot\'),url(\'Quicksand_Bold-webfont.woff\') format(\'woff\'),url(\'Quicksand_Bold-webfont.ttf\') format(\'truetype\'),url(\'Quicksand_Bold-webfont.svg#webfont41HQJ7Rv\') format(\'svg\');
font-weight: normal;
font-style: normal;
}
*{
margin:0;
padding:0;
font: 12px arial,helvetica,verdana,sans-serif;
color:black;
list-style: none;
text-decoration: none;
text-align: left;
}
body{
text-align: center;
}
html{
overflow-y: scroll;
}
#wrapper{
width:85%;
margin:0 auto;
min-width:720px;
max-width:1000px;
}
/* #header,#logo,#category,#country{
width: 100%;
float:left;
}*/
#header{
margin-top: 15px;
width: 100%;
}
#logo{
max-width: 400px;
float: left;
}
#search{
float: right;
max-width: 200px;
}
#horNav{
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
overflow: hidden;
display: block;
width: 100%;
}
input{
display: inline;
}
#posts{
width:50%;
max-width: 522px;
z-index: 200;
}
div.post{
position: relative;
}
#verNav{
width:20%;
margin:0 2%;
max-width: 130px;
}
#adverts{
width:25%;
}
#posts,#verNav,#adverts{
float:left;
}
#posts div.post,#verNav div,#adverts div{
margin-top:25px;
}
#posts embed,#posts object{
width: 100%;
max-width: 512px;
height: 288px;
}
#pages{
display: block;
overflow: hidden;
width: 100%;
}
#footer{
width:100%;
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
clear:both;
display: block;
overflow: hidden;
margin-bottom: 20px;
}
#mysql{
margin-top: 20px;
}
#mysql label{
float: left;
width: 100px;
}
#mysql label,#mysql input{
font-size: 14px;
margin-bottom: 4px;
}
#mysql input{
border:1px solid black;
}
#mysql input:textarea{
width: 150px;
}
.clear{
clear: both;
}
#logo h1 a{
font-style:italic;
text-decoration: none;
font-size: 44px;
}
#horNav a{
/* background: black;*/
}
#category{
display: none;
}
#verNav p{
font-weight: bold;
font-style: italic;
margin-bottom: 10px;
}
#verNav li{
/*padding: 1px 0;
border-top: 1px #b8baba solid;*/
}
#verNav ul{
/* margin-right: 75px;*/
/* border-bottom: 1px #b8baba solid;*/
}
#verNav a,#verNav li{
font-family: \'QuicksandBook\';
font-size: 13px;
color:#6b6f70;
}
#verNav li{
margin-bottom:1px;
}
#verNav p{
font-family: \'QuicksandBook\';
font-size: 13px;
color:#14b2c3;
}
.horNav li{
float:left;
border-right:2px solid #e6e6dc;
}
.horLeft{
float: left;
}
.horRight{
float: right;
}
.advertisment li{
float:right;
border-left:2px solid #e6e6dc;
}
#horNav a,#footer a{
display:block;
padding:3px 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 20px;
/* color:white;*/
font-family: HELVETICA NEUE;
font-size: 18px;
/* height: 37px;*/
}
#horNav li,#footer li{
padding: 0 2px;
}
#horNav a:hover,#footer a:hover{
background:#e6e6dc;
}
.home{
color: #e23598;
}
.submit{
color: #ffd236;
}
.tags{
color: #a5c43a;
}
.hello{
color: #ffd236;
}
.contact{
color: #a5c43a;
}
#verNav a:hover{
background: #e6e6dc;
}
iframe{
border: none;
font-size: 14px;
}
#posts div{
border-bottom: 2px black solid;
margin-bottom: 20px;
}
#posts iframe{
border: none;
width:100%;
height:288px;
max-width: 512px;
}
.title{
font-size: 20px;
font-family: \'QuicksandBold\';
color: #6b6f70;
}
.description{
font-family: HELVETICA NEUE;
font-size: 14px;
border-bottom: 1px grey dotted;
margin-top: 14px;
padding-bottom: 5px;
text-align: justify;
}
.info{
font-family: HELVETICA NEUE;
font-size: 14px;
color: #6b6f70;
padding: 5px 0;
}
.category,.country{
font-family:helevetica neue;
font-size:14px;
color: #6b6f70;
}
#fade{
position: fixed;
top: 0;
left: 0;
background: #5f5f5f;
z-index: -100;
width: 100%;
height: 100%;
opacity:0;
}
解决方法
JSFiddle忽略您的Doctype并使用HTML 5 Doctype。这将触发标准模式。
您的Doctype（无URI的HTML 4 Transitional）将触发Quirks模式。
如果要使用Transitional，请使用规范中指定的Doctype，而不要使用缩写。
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。