[英]Header Button's text/font-weight changing unintentionally
我正在为页面制作标题,但从某个角度来看,我注意到启动下拉菜单(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>
我不知道您现在正在使用哪种字体,但是也许您需要样式回调
.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;
}
它将适用于所有浏览器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.