我创建了一个纯 CSS/HTML 下拉菜单。当鼠标悬停在父链接上时,隐藏的下拉菜单就会出现。在移动设备上,与其他 anchor 相比,包含隐藏菜单的 anchor 似乎突然具有更小的字体大小。在桌面上,字体大小与任何其他链接一样。
- 为什么移动设备使这些 anchor 的字体大小变小/变大?
- 如何避免这种行为?
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>
最佳答案
不同的是显示下拉菜单的链接 inline-block
所以做这个改变
.topmenu_link
{
margin: 0px 50px 0px 0px;
display: inline-block;
}
/* you can delete this rule */
/* li.dropdown_button
{
display: inline-block;
} */
关于android - 下拉菜单中的 Ancher 字体大小在移动浏览器中发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38682968/