1

我正在尝试使用条件 CSS 来呈现我的页面。使用 Firefox 时，它会按预期显示，但使用 Google Chrome 时则不然。它似乎正在拉动“@media all and (min-width: 960px) and (max-width: 1920px)”部分而不是“@media screen and (min-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; }
4

0 回答 0