Html Internet Explorer 11-测量百分比时的不同行为？

我有一个棘手的问题，我一直无法解决

$（“.btn nav”）。打开（“点击”，函数（）{
$（“.nav容器”）
.toggleClass（“showNav hideNav”）
.removeClass（“隐藏”）；
$（this.toggleClass（“动画”）；
});
html{
保证金：0自动；
高度：100%-ms内容缩放：无；
-ms触摸动作：pan-x pan-y；
-webkit内容缩放：无；
内容缩放：无；
}
身体{
字体系列：“PT Sans”，arial，衬线；
保证金：0；
背景色：黑色；
}
钮扣{
z指数：1070；
背景：无；
边界：无；
}
按钮：：-moz焦点内部{
边界：0
}
：焦点{
大纲：无
}
：-moz焦点内部{
边界：0
}
.btn导航：悬停{
光标：指针
}
.btn导航：悬停栏{
背景：#17BEBB
}
.酒吧{
显示：块；
身高：50%；
宽度：100%；
背景：#fff；
利润率：22%；
}
.btn导航{
z指数：1070；
显示：块；
填充：0.8%0；
宽度：3%；
身高：4%；
位置：固定；
左：2%；
保证金：0自动；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
.btn导航：焦点{
大纲：无
}
.中{
保证金：0自动
}
.酒吧{
-webkit过渡：全部.7秒轻松；
-moz过渡：所有.7秒轻松；
-ms过渡：所有.7秒轻松；
-o型过渡：所有。7秒缓解；
过渡：全部。7秒轻松；
}
.动画{
z指数：1070；
}
.动画。箭头-top-r{
-webkit变换：rotateZ（-45度）translateY（180%）；
-莫兹变换：旋转（-45度）平移（180%）；
-ms变换：rotateZ（-45度）translateY（180%）；
-o变换：旋转（-45度）平移（180%）；
变换：旋转（-45度）平移（180%）；
宽度：55%；
}
.动画。箭头-middle-r{
-webkit转换：translateX（50%）；
-moz变换：translateX（50%）；
-ms转化：translateX（50%）；
-o-转换：translateX（50%）；
转化：translateX（50%）；
}
.动画。箭头-bottom-r{
-webkit变换：rotateZ（45度）translateY（-180%）；
-莫兹变换：旋转（45度）平移（-180%）；
-ms变换：旋转（45度）平移（-180%）；
-o变换：旋转（45度）平移（-180%）；
变换：旋转（45度）平移（-180%）；
宽度：55%；
}

只需使用像素，4k显示器是按比例缩放的，我的uhd笔记本在查看一个1200px宽度的页面时显示完全相同的页面。
这似乎是由于IE没有正确计算
按钮的
高度

使用
位置时：固定应根据初始包含块计算元件的位置和尺寸：

具有position:absolute的元素的位置和尺寸相对于其包含块，而具有position:fixed的元素的位置和尺寸始终相对于初始包含块。这通常是视口：浏览器窗口或纸张的页面框

固定定位（）

IE似乎正在根据
主体调整按钮的大小。由于您使用的是百分比
高度
，并且
主体
上未指定任何
高度
，这将导致
按钮
的
高度
设置为
自动
。这可以通过添加
高度：100%来克服
到
主体
，这样就可以计算
按钮的
高度

按钮中的条的
高度
设置为
50%
，加上
填充
将意味着它们超过
按钮的
高度
。要克服这个问题，您应该设置
overflow:visible按钮上单击code>，使其可见

您还需要修复一个小的打字错误：

height: 100% -ms-content-zooming: none;

应该是：

height: 100%; 
-ms-content-zooming: none;

您可能还需要设置
min height
和
min width
，以确保在视口高度非常小时显示
按钮


$（“.btn nav”）。打开（“点击”，函数（）{
$（“.nav容器”）
.toggleClass（“showNav hideNav”）
.removeClass（“隐藏”）；
$（this.toggleClass（“动画”）；
});
html{
保证金：0自动；
身高：100%；
-ms内容缩放：无；
-ms触摸动作：pan-x pan-y；
-webkit内容缩放：无；
内容缩放：无；
}
身体{
身高：100%；
字体系列：“PT Sans”，arial，衬线；
保证金：0；
背景色：黑色；
}
钮扣{
溢出：可见；
z指数：1070；
背景：无；
边界：无；
}
按钮：：-moz焦点内部{
边界：0
}
：焦点{
大纲：无
}
：-moz焦点内部{
边界：0
}
.btn导航：悬停{
光标：指针
}
.btn导航：悬停栏{
背景：#17BEBB
}
.酒吧{
显示：块；
身高：50%；
宽度：100%；
背景：#fff；
利润率：22%；
}
.btn导航{
z指数：1070；
显示：块；
填充：0.8%0；
宽度：3%；
身高：4%；
位置：固定；
左：2%；
保证金：0自动；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
最小高度：20px；
最小宽度：50px；
}
.btn导航：焦点{
大纲：无
}
.中{
保证金：0自动
}
.酒吧{
-webkit过渡：全部.7秒轻松；
-moz过渡：所有.7秒轻松；
-ms过渡：所有.7秒轻松；
-o型过渡：所有。7秒缓解；
过渡：全部。7秒轻松；
}
.动画{
z指数：1070；
}
.动画。箭头-top-r{
-webkit变换：rotateZ（-45度）translateY（180%）；
-莫兹变换：旋转（-45度）平移（180%）；
-ms变换：rotateZ（-45度）translateY（180%）；
-o变换：旋转（-45度）平移（180%）；
变换：旋转（-45度）平移（180%）；
宽度：55%；
}
.动画。箭头-middle-r{
-webkit转换：translateX（50%）；
-moz变换：translateX（50%）；
-ms转化：translateX（50%）；
-o变换：tran