モバイルブラウザのドロップダウンメニューのAncher font-sizeが変更されました

Question

CSS/HTMLのみのドロップダウンメニューを作成しました。親リンクの上にマウスが移動すると、非表示のドロップダウンメニューが表示されます。モバイルデバイスでは、隠れたメニューを含むアンカーは、他のアンカーに比べてフォントサイズが突然小さくなっているようです。デスクトップでは、font-sizeは他のリンクと同じように変わりません。

• なぜこれらのアンカーのフォントサイズを小さくするか大きくするのですか？
• この現象を回避するにはどうすればよいですか？

全コードJSFiddle上&作業例：https://jsfiddle.net/fL4xj3jc/

<ul class="topmenu_parent"> 
    <li class="topmenu_link"><a href="home/index">Home</a></li> 
    <li class="topmenu_link dropdown_button"> 
    <a href="javascript:void(0)" class="dropdown_parent">Account</a> 
    <div class="dropdown_links"> 
     <a href="users/profile/1">Mijn profiel</a> 
     <a href="users/edit/email">Bewerk e-mail</a> 
     <a href="users/edit/password">Bewerk wachtwoord</a> 
     <a href="users/search">Zoek gebruiker</a> 
    </div> 
    </li> 
    <li class="topmenu_link dropdown_button"> 
    <a href="javascript:void(0)" class="dropdown_parent">Berichten</a> 
    <div class="dropdown_links"> 
     <a href="messages/inbox">Inkomend</a> 
     <a href="messages/outbox">Uitgaand</a> 
     <a href="messages_create/form">Nieuw bericht</a> 
    </div> 
    </li> 
    <li class="topmenu_link dropdown_button"> 
    <a href="javascript:void(0)" class="dropdown_parent">Pronostiek</a> 
    <div class="dropdown_links"> 
     <a href="predictions/index/1">Jupiler Pro League</a> 
     <a href="predictions/index/2">Champions League (voorronde)</a>  
    </div> 
    </li> 
    <li class="topmenu_link dropdown_button"> 
    <a href="javascript:void(0)" class="dropdown_parent">Scorebord</a> 
    <div class="dropdown_links"> 
     <a href="predictions/score/1">Jupiler Pro League</a> 
     <a href="predictions/score/2">Champions League (voorronde)</a>  
    </div> 
    </li> 
    <li class="topmenu_link"><a href="home/faq">FAQ</a></li> 
    <li class="topmenu_link"><a href="home/logout">Log uit</a></li> 
</ul> 

デスクトップ：

モバイル：

Answer 1

違いはinline-block

Updated fiddle

だから、この変更を行うに表示されるドロップダウンメニュー付きのリンクです

.topmenu_link 
{ 
    margin: 0px 50px 0px 0px; 
    display: inline-block; 
} 

/* you can delete this rule */ 
/* li.dropdown_button 
{ 
    display: inline-block; 
} */ 

Answer 2

はちょうどあなたのリンクのクリック動作を削除します。

またはCSSではなく、は、IE < 11でサポートされている：

.dropdown_parent { 
    pointer-events: none; 
}