Изменение фонового положения CSS между chrome/firefox

Question

Я создаю сайт для окончательного проекта, и у меня проблема с фоновой позицией изображения моего навигатора, изменяющегося между браузерами (в основном Firefox).

Это можно увидеть, перейдя по ссылке, которую я загрузил на сервер моего колледжа: http://cis.scc.losrios.edu/~cisw320q_stu007/sbc/index.html. Изменяя используемую область просмотра (Chrome/Firefox), вы увидите разницу в позиционировании, о которой я говорю. Chrome правильно отображает фоновое положение (с «Бизнес BLDG» прямо под логотипом школы).

Есть ли трюк CSS, который я могу использовать для облегчения этой проблемы, так что фоновая позиционирование является статической между всеми видовыми экранами?

Спасибо!

основной код нав:

div#nav { 
width: 1024px; 
border-bottom: 3px solid #fff; 
border-top-left-radius: 25px; 
border-top-right-radius: 25px; 
background-color: #660000; 
background: url(http://i60.tinypic.com/i6gn5x.jpg); 
background-position-y: 53.75%; 
color: #fff; 

}

Answer 1

Вы можете использовать этот фрагмент кода целевой специально Firefox и установить правильный фон положение для него.

@-moz-document url-prefix() { 
    /* Your styling for Firefox goes here */ 
    div#nav{ 
     /* background-position: firefox-value */ 
    } 
} 

Answer 2

background-position-y: 53.75%; 

в

background-position: 0 53.75%; 

/* NAViGATiON START */ 
 

 
div#nav { 
 
width: 1024px; 
 
border-bottom: 3px solid #fff; 
 
border-top-left-radius: 25px; 
 
border-top-right-radius: 25px; 
 
background-color: #660000; 
 
background-image: url("http://i60.tinypic.com/i6gn5x.jpg"); 
 
background-position: 0 53.75%; 
 
color: #fff; 
 
} 
 

 
div#nav h1 { 
 
    text-align: center; 
 
    margin: 0; 
 
    border-top-left-radius: 25px; 
 
    border-top-right-radius: 25px; 
 
    background-color: rgba(102,0,0,.91); 
 
    font-family: sans-serif; 
 
} 
 

 
div#nav ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    margin-left: -35px; 
 
    border-top: 3px solid #fff; 
 
} 
 

 
div#nav ul li { 
 
    display: inline-block; 
 
    border: 4px solid #000; 
 
    margin-left: -5px; 
 
    width: 197.6px; 
 
    height: 100px; 
 
    line-height: 5; 
 
    background-color: rgba(34,34,34,0.2); 
 
} 
 

 
div#nav ul li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-family: verdana; 
 
    font-size: 1.2em; 
 
} 
 

 
div#nav ul li:hover { 
 
    background-color: rgba(34,34,34,0.8); 
 
} 
 

 
div#nav ul li a:hover { 
 
    color: #FFCC00; 
 
    -webkit-transition: all 1.5s; 
 
}

<div id="nav"> 
 
    <h1><img src="http://i60.tinypic.com/28i2o9e.png"></font><br> City Business Center</h1> 
 
    <ul> 
 
     <li><a href="#" title="Go back to the Business Center Homepage" alt="site index">Home</a></li> 
 
     <li><a href="#" title="Find out more about us; our mission statement and history can be found here." alt="about us">About</a></li> 
 
     <li><a href="#" title="Use this form to contact us for any non-work related inquiries!" alt="contact">Contact</a></li> 
 
     <li><a href="#" title="Petition the business center for specific services." alt="petition for services">Petition</a></li> 
 
     <li><a href="#" title="Want to support your local community college and help fund potential educational programs and outreach? Click here.">Donate</a></li> 
 
    </ul> 
 
    </div>