我必须上传即将推出的响应式网页。 出于一些奇怪的原因，即使应该使用媒体查询规则，firefox也总是使用主流css规则，即使应该使用主流规则，chrome也会使用css媒体查询规则。
我粘贴在html和CSS规则之下。媒体查询位于样式表的末尾。有人可以让我知道。非常感谢提前。
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Name Surname - ROLE 1 and Role 2</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href="tools/style.css" rel="stylesheet" type="text/css" />
<link href="tools/960.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Clarendon_LT_Std_700.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1,.logo_box h2, h3', {fontFamily: 'Clarendon LT Std', hover:true})
</script>
</head>
<body>
<div id="content">
<div id="flags">
<div id="flag1">
<a href="index.html"><img alt="Italiano" src="images/BandiraItaliana.gif"/></a>
</div>
<div id="flag2">
<a href="indexEn.html"><img alt="Inglese" src="images/BandiraInglese.gif"/></a>
</div>
</div>
<div class="logo_box"><h1>Name Lname<br/><br/>LONGROLE1<br/>and<br/>LONGROLE2</h1><h2>FullTask1</br> Fulltask2</h2><h2 style="color: #ffe400;">Italiano <img alt="Italiano" src="images/doubleArrow.gif"/> Inglese<br>Italiano <img alt="Italiano" src="images/doubleArrow.gif"/> Spagnolo</h2></div>
<div class="main_box">
<h2>Will be online SOON!<br/><span>Contacts:</span></h2>
<ul class="info">
<li>
<h3>T</h3>
<p>+39 123 12345678</p>
</li>
<li>
<h3>@</h3><p>mail@domain.com</p>
</li>
<li>
<h3>I</h3>
<p>1 Street Avenue<br/>New York</p>
</li>
<li>
<h3>P.I.</h3>
<p>1234567890</p>
</li>
<li>
<h3>C.F.</h3>
<p>TR34EDD1234567EDD</p>
</li>
</ul>
</div>
</div>
</body>
</html>
/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
html,body{
height: 100%;
}
body{
margin:0;
padding:0;
background:#000;
font-family:"Helvetica Neue",Helvetica, Arial;
}
/*div#shim{
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -140px;
float: left;
}*/
div#content {
width: 50.6875em;/*811px;*/
height: 29.375em;/*470px;*/
/*margin: 14px auto;*/
/*clear: both;*/
/*position: relative;
/*top: -140px;*/
text-align: center;
/* IE4ever Hack: Hide from IE4 **/
/*position: static;
/** end hack */
position:absolute;
left:50%;
top:50%;
margin:-14.6875em 0 0 -25.3125em;/*-235px 0 0 -405px;*/
}
div#flags {
width:8.75em;/*140px;*/
padding-top:1.875px;/*30px;*/
padding-bottom:0.625em;/*10px;*/
margin: 0 auto 0;
}
div#flag1{
margin-left: 0px;
float:left;
}
.logo_box{
width: 21.25em;/*340px;*/
float: left;
padding:0.4375em 1.875em;/*7px 30px;*/
/*height: 400px;*/
position: relative;
}
.logo_box h1{
padding: 0.3525em 4.375em 1.3333em 1.25em;/*25px 70px 12px 20px;*/
position:relative;/*position: absolute;*/
right: 0;
text-align:left;
top: 15%;
float: left;
color: #fff;
letter-spacing: -0.0625em;/*-1px;*/
font-size: 2.375em;/*38px;*/
margin-bottom:0;/*20px;*/
}
.logo_box h1 span{
font-size:1.375em;/*22px;*/
margin-bottom:1.875em;/*30px*/
}
.logo_box h1 cufon{
margin-bottom: -0.25em;/*-4px;*/
}
.logo_box h2{
font-size:1.375em;/*22px;*/
margin-bottom:1.20em;/*20px;*/
color: #fff;
}
.main_box{
float: left;
width: 14.375em;/*230px;*/
/*height: 375px;*/
padding: 0.9375em 1.5625em 0.9375em;/* 25px 25px 15px;*/
border-left: 0.0625em solid #303030;/*1px solid #303030;*/
}
.main_box h2{
font-family: Georgia;
color: #ffe400;
font-size: 1.5em;/*24px;*/
margin-bottom: 1.25em;/*20px;*/
text-align: left;
}
.main_box h2 span{
color: #fff;
font-size: 1em;/*16px;*/
line-height: 1.625em;/*26px;*/
font-style: italic;
}
ul.info{
width: 14.375em;/*230px;*/
padding: 0;
margin: 0.625em 0 0 0;/*10px 0 0 0;*/
float: left;
}
ul.info h3{
font-size: 1.5em;/*24px;*/
color: #333;
float: left;
margin-right: 0.9375em;/*15px;*/
padding-top: 0.3125em;/*5px;*/
}
ul.info li{
margin-bottom: 1.25em;/*20px;*/
clear: both;
float: left;
}
ul.info li h3{
width: 2.2em;/*40px;*/
text-align:right;
}
ul.info li p{
font-size: 0.8125em;/*13px;*/
line-height: 1.5em;/*20px;*/
color: #fff;
float: left;
margin: 0;
text-align:left;
}
/*
ul.info li p.social a.tw{
width: 28px;
height: 28px;
background: url(../images/social.png) left top no-repeat;
margin-right: 8px;
float: left;
}
ul.info li p.social a.fb{
width: 28px;
height: 28px;
background: url(../images/social.png) -36px top no-repeat;
float: left;
margin-right: 8px;
}
ul.info li p.social a.li{
width: 28px;
height: 28px;
background: url(../images/social.png) -72px top no-repeat;
float: left;
}
ul.info li p.social a.tw:hover{
width: 28px;
height: 28px;
background: url(../images/social.png) left bottom no-repeat;
float: left;
}
ul.info li p.social a.fb:hover{
width: 28px;
height: 28px;
background: url(../images/social.png) -36px bottom no-repeat;
float: left;
}
ul.info li p.social a.li:hover{
width: 28px;
height: 28px;
background: url(../images/social.png) -72px bottom no-repeat;
float: left;
}
*/
/* You'll need prefixes. @-ms-viewport, @-o-viewport, etc... */
@viewport {
width: device-width;
}
@media screen (min-width: 800px) and (max-width: 900px)
{
div#content {
width:42.7em;
}
#flag{
width: 10.75em;
}
div#flag1{
margin-left:2em;
}
}
@media screen (min-width: 700px) and (max-width: 799px)
{
div#content {
width:16.7em;
}
.logo_box{
width: 10.25em;
float: left;
padding:0.4375em 1.875em;
position: relative;
}
.logo_box h1{
padding: 0.3525em 0.375em 1.3333em 1.25em;/*2*/
position:relative;
right: 0;
text-align:left;
top: 15%;
float: left;
color: #fff;
letter-spacing: -0.0525em;
font-size: 1.975em;
margin-bottom:0;
}
.logo_box h1 cufon{
margin-bottom: -0.25em;
}
.logo_box h2{
font-size:1.375em;
margin-bottom:1.20em;
color: #fff;
}
}
@media screen (min-width: 600px) and (max-width: 699px)
{
div#content {
width:12.7em;
}
由于