我已经制作了一个带有jQuery下拉菜单的菜单,一切正常,除非你在Mac上的safari中查看它,它会在下拉菜单显示时更改字体粗细。
就修复它需要改变的内容而言,我很无能为力。你们可以帮我一把,我们将不胜感激:
你可以看到实时版本:autooffer.dk(悬停“mærker”)并注意其他菜单更改字体重量
jQuery的:
/* DROPDOWN & MENU ANIMATIONS */
var mindicator = $('.dropdown_indicator');
mindicator.hide();
var dropdown = $('.dropdown')
dropdown.hide();
$(".hover_brands").hover(
function () {
dropdown.finish().slideDown(200);
/*mindicator.css("display","block");*/
},
function () {
dropdown.finish().slideUp(200);
/* mindicator.css("display","none");*/
}
);
dropdown.mouseover(
function () {
dropdown.stop(true, true).slideDown(0);
/*mindicator.css("display","block");*/
}
);
dropdown.mouseleave(
function () {
dropdown.finish().slideUp(200);
/*mindicator.css("display","none");*/
}
);
mindicator.mouseover(
function () {
dropdown.stop(true, true).slideDown(0);
}
);
mindicator.mouseleave(
function () {
dropdown.finish().slideUp(200);
}
);
CSS:
#menu
{
width: 100%;
height: 45px;
background: #3e6f9b;
color: #fff;
position: relative;
font-size: 16px;
}
#menu ul
{
margin:0px;
padding: 0px;
list-style: none;
position: relative;
top: 10px;
margin-left: 60px;
}
#menu ul li
{
display: block;
float: left;
margin-right: 35px;
color: #fff;
text-decoration: none;
-webkit-transition: 0.3s; /* Safari */
transition: 0.3s;
border-radius: 5px;
padding:2px 5px 2px 5px;
}
#menu ul li:hover
{
-webkit-transition: 0.3s; /* Safari */
transition: 0.3s;
background: #36536e;
}
#dropdown
{
width: 100%;
height: auto;
min-height: 150px;
background: #28abe3;
position: relative;
display: none;
color: #fff;
font-weight: normal;
font-size: 15px;
padding-top: 30px;
padding-bottom: 30px;
z-index: 2;
}
HTML:
<div id="menu" class="fix_menu_hover">
<ul class="nav">
<a href="#PAGE#(HOME)" class="anchor_line">
<li>Vælg bil</li>
</a>
<a href="#PAGE#(TILBUD)" class="anchor_line">
<li>Tilbud</li>
</a>
<a href="#PAGE#(MAERKER)">
<li class="hover_brands">Mærker</li>
</a>
</ul>
</div>
<div id="dropdown" class="dropdown">
<ul>#LOOP_CARMAKES_ACTIVE#
<a href="#PAGE_CARMAKE#">
<li><div class="dropdown_dot"></div>
<span class="move_dropdown_txt">#CARMAKE_NAME#</span>
</li>
</a>
#END#
</ul>
</div>
答案 0 :(得分:0)
字体渲染问题,试试这个:
body {
-webkit-font-smoothing: subpixel-antialiased;
}