条件付き CSS を使用してページをレンダリングしようとしています。Firefox を使用すると期待どおりに表示されますが、Google Chrome では表示されません。「@media screen and (min-width: 1920px)」ではなく、「@media all and (min-width: 960px) and (max-width: 1920px )」セクションのスタイルをプルしているようですが、画面サイズは 1920px よりもはるかに広いです。
私のHTMLは次のとおりです。
<div id="hpBody">
<div id="hpHeader"><div id="siteLogo"><img src='/images/logo.png' /></div></div>
<div id="hpContainer">
<div id="hpEvent">
<div id="hpEventImage"><img src='/images/home_img.png' /></div>
<div id="hpEventInfo"><h1 class="home_H1">My Title</h1><h2 class="home_H2">Subtitle</h2></div>
</div>
<div id="hpActions">
<div id="hpEventBtn" class="btn"><img src='/images/inv.png' /></div>
<div id="hpTenantBtn" class="btn"><img src='/images/inv.png' /></div>
<div class='clear'></div>
<div id="hpTourBtn" class="btn"><img src='/images/inv.png' /></div>
<div id="hpAboutBtn" class="btn"><img src='/images/inv.png' /></div>
<div class='clear'></div>
</div>
</div>
</div>
そして、私のCSSは次のとおりです。
@charset "UTF-8";
/* CSS Home*/
html, body { margin:0; padding:0;}
html { min-height:100%;position:relative }
body{ height:100%; font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: #333333t; text-shadow:0px -1px 0px rgba(000,000,000,0.1),0px 1px 0px rgba(255,255,255,1); }
div.clear { clear:both; }
img {height:auto; max-width:100%:}
#hpBody { position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;z-index:-1; background:#fc0; }
#hpHeader { background: url('/images/home_topbk_bar.png') repeat-x; width:100%; }
#siteLogo { position:absolute; z-index:15;}
#hpContainer { }
/* tablet landscape */
@media all and (min-width: 960px) and (max-width: 1920px ) {
#hpBody { background:red; }
#hpHeader { min-height:210px; }
#siteLogo { height:302px; width:846px; }
#hpContainer { width:100%; }
}
@media screen and (min-width: 1920px) {
#hpBody { background:#ddd; }
#hpHeader { height:15%; }
#siteLogo { height:302px; width:846px; }
#hpContainer { height:85%;}
}
.home_H1{ font-size: 2.1em; font-weight: bold; }
.home_H2{ font-size: 1.1em; }
/* CSS Events + Tour + About us + Tenants*/
H1, H2 {
font-family: Helvetica, Arial, sans-serif;
text-shadow:0px -1px 0px rgba(000,000,000,0.1),0px 1px 0px rgba(255,255,255,1);
}
H1{ font-size: 2.3em; color: #000000f; }
H2{ font-size: 1.7em; color: #7090c1; margin-bottom:.5em; }