標題按鈕的文本/字體粗細意外更改

Question

我正在為頁面制作標題，但從某個角度來看，我注意到啟動下拉菜單（Safari 8）時，文本系列已更改。 然后，我嘗試在Chrome中打開它，在啟動jQuery函數時它沒有更改。 但是當我嘗試更改字體時，並沒有任何區別。 它根本沒有改變字體。 因此，即使我沒有為頁眉標簽指定字體，它仍然被格式化。 在此先感謝您的幫助。 很抱歉，這只是一些庄園錯誤，對此我還是很陌生。

 $(document).ready(function() { $('.hdr-drpdwn-menu').hide(); $('.hdr-list-more').hover( function() { $(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast'); }, function() { $(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast'); } ); }); 

 /* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */ body { margin: 0; padding: 0; } ul, li, p, h1, h2, h3, h4, h5, button { margin: 0; padding: 0; border: none; background-color: transparent; } ul, li { list-style: none; } a, a:active, a:visited { text-decoration: none; } #header { position: fixed; top: 0; left: 0; width: 100%; height: 40px; background-color: #5a5a5a; font-style: normal; } #header .hdr-nav-opt { float: left; margin-left: 10px; background-color: transparent; } #header .hdr-nav-soc { float: right; margin-right: 10px; background-color: transparent; } .hdr-nav-list .hdr-list-tab{ display: inline; background-color: transparent; } .hdr-nav-list .hdr-list-tab .hdr-button { height: 40px; color: #fff; font-size: 20px; text-align: center; padding-left: 5px; padding-right: 5px; background-color: transparent; } .hdr-nav-list .hdr-list-tab .hdr-button:hover { background-color: #7D7D7D; } .hdr-drpdwn-menu { position: relative; width: 120px; margin-left: 40px; background-color: #5a5a5a; box-shadow: 2px 2px 10px #888888; border: 1px solid #888888; } .hdr-drpdwn-menu .hdr-button { width: 100%; height: 40px; color: #fff; font-size: 20px; text-align: center; padding-left: 5px; padding-right: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <!-- The Global Header of the website--> <div id="header"> <!-- The Left part of the header--> <div class="hdr-nav-opt"> <ul class="hdr-nav-list"> <li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>| <li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button> <!-- The Dropdown Menu--> <div class="hdr-drpdwn-menu"> <ul class="hdr-drpdwn-list"> <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li> <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li> <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li> </ul> </div> </li> </ul> </div> <!-- The Right part of the header--> <div class="hdr-nav-soc"> <ul class="hdr-nav-list"> <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>| <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>| <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>| <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li> </ul> </div> </div> 

Answer 1

我不知道您現在正在使用哪種字體，但是也許您需要樣式回調

.hdr-drpdwn-menu .hdr-button {
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 20px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

它將適用於所有瀏覽器。