禁用文本缩放

Question

我在站点的最顶部(导航栏)有一个div标记。在其中，我有另一个div标记，它是一个要点击的元素(占宽度的10%)。在这个div中，有一个简单的文本。我已经设法使这两个div的大小在放大或缩小时保持原样。但只是文本不想停留，放大后会变大。它还会改变位置。无论放大还是缩小，我都希望文本始终保持相同的大小。

以下是我所做的：

<style type="text/css">
div.Navigation {
background: #5555FF;
height: 3%;
line-height: 25px;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
vertical-align: middle;
font-family: Sans-serif;
}
div.button {
background: rgba(0,0,255,0.3);
width: 10%;
height: 100%;
text-align: center;
color: #9999FF;
font-size: 80%;
}
</style>

<div class="Navigation">
<div class="button">TEXT</div>
</div>

示例

有人能帮我防止放大时文本变大吗？也许最好的方法是使用Javascript。我是Javascript的初学者，所以你可能需要彻底地解释它。提前谢谢。

附言：我找到了很多这个话题的链接，但没有一个真正帮助我。

Answer 1

不要用%来定义你的导航高度，使用px，禁用缩放是一个非常糟糕的做法。