Question

我已经制作了一个带有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>

Answer 1

字体渲染问题，试试这个：

body {
  -webkit-font-smoothing: subpixel-antialiased;
}

Jquery下拉菜单在悬停时更改字体粗细

1 个答案: