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

Question

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

$(".btn-nav").on("click tap", function() {
  $(".nav-container")
    .toggleClass("showNav hideNav")
    .removeClass("hidden");
  $(this).toggleClass("animated");
});

html {
  margin: 0 auto;
  height: 100% -ms-content-zooming: none;
  -ms-touch-action: pan-x pan-y;
  -webkit-content-zooming: none;
  content-zooming: none;
}
body {
  font-family: 'PT Sans', arial, serif;
  margin: 0;
  background-color: black;
}
button {
  z-index: 1070;
  background: none;
  border: none;
}
button::-moz-focus-inner {
  border: 0
}
:focus {
  outline: none
}
::-moz-focus-inner {
  border: 0
}
.btn-nav:hover {
  cursor: pointer
}
.btn-nav:hover .bar {
  background: #17BEBB
}
.bar {
  display: block;
  height: 50%;
  width: 100%;
  background: #fff;
  margin: 22% auto;
}
.btn-nav {
  z-index: 1070;
  display: block;
  padding: 0.8% 0;
  width: 3%;
  height: 4%;
  position: fixed;
  left: 2%;
  margin: 0 auto;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.btn-nav:focus {
  outline: none
}
.middle {
  margin: 0 auto
}
.bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}
.animated {
  z-index: 1070;
}
.animated .arrow-top-r {
  -webkit-transform: rotateZ(-45deg) translateY(180%);
  -moz-transform: rotateZ(-45deg) translateY(180%);
  -ms-transform: rotateZ(-45deg) translateY(180%);
  -o-transform: rotateZ(-45deg) translateY(180%);
  transform: rotateZ(-45deg) translateY(180%);
  width: 55%;
}
.animated .arrow-middle-r {
  -webkit-transform: translateX(50%);
  -moz-transform: translateX(50%);
  -ms-transform: translateX(50%);
  -o-transform: translateX(50%);
  transform: translateX(50%);
}
.animated .arrow-bottom-r {
  -webkit-transform: rotateZ(45deg) translateY(-180%);
  -moz-transform: rotateZ(45deg) translateY(-180%);
  -ms-transform: rotateZ(45deg) translateY(-180%);
  -o-transform: rotateZ(45deg) translateY(-180%);
  transform: rotateZ(45deg) translateY(-180%);
  width: 55%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <button class="btn-nav">
    <div class="bar arrow-top-r"></div>
    <div class="bar arrow-middle-r"></div>
    <div class="bar arrow-bottom-r"></div>
  </button>
</body>

https://jsfiddle.net/6t04y9wo/6/

如您所见，左上角的导航按钮在 Chrome 和 IE 中显示不同。我试图让一切都以百分比为单位工作，以避免与 4k 显示器（或非常不同的分辨率）或缩放不兼容（这在触摸屏显示器+ windows 上真的很难避免）。

据我所知，button 元素的 height 的测量值确实不同，因此内部高度也会不同。我为此尝试了许多不同的设置，但我无法让它工作并且在 Chrome 和 Internet Explorer 上看起来都不错。

这里的margin好像是：

.bar {
  display: block;
  height: 50%;
  width: 100%;
  background: #fff;
  margin: 22% auto;
}

不正确，但我不知道如何修正。

也许有人提供了一些有用的提示？

Answer 1

只需使用像素，4k 显示器已缩放，当我查看 1200px 宽度的页面时，我的超高清笔记本显示的页面完全相同。

Answer 2

这似乎是由于 IE 没有正确计算 button 的 height。

当使用 position: fixed; 时，元素的位置和尺寸应根据初始包含块进行计算：

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

固定定位(https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning)

看来 IE 正在根据 body 调整按钮的大小。由于您使用的是百分比 height 并且没有在 body 上指定 height 这将导致 button 的 height 被设置为 auto.这可以通过将 height: 100%; 添加到 body 来克服，这样 button 的 height 可以相对于它进行计算。

button 中柱的 height 设置为 50%，padding 意味着它们超过 height button。要克服这个问题，您应该在 button 上设置 overflow: visible; 以允许它们可见。

还有一个小错字需要更正：

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

应该是：

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

您可能还想设置 min-height 和 min-width 以确保 button 在视口高度非常小时显示。

$(".btn-nav").on("click tap", function() {
  $(".nav-container")
    .toggleClass("showNav hideNav")
    .removeClass("hidden");
  $(this).toggleClass("animated");
});

html {
  margin: 0 auto;
  height: 100%;
  -ms-content-zooming: none;
  -ms-touch-action: pan-x pan-y;
  -webkit-content-zooming: none;
  content-zooming: none;
}
body {
  height: 100%;
  font-family: 'PT Sans', arial, serif;
  margin: 0;
  background-color: black;
}
button {
  overflow: visible;
  z-index: 1070;
  background: none;
  border: none;
}
button::-moz-focus-inner {
  border: 0
}
:focus {
  outline: none
}
::-moz-focus-inner {
  border: 0
}
.btn-nav:hover {
  cursor: pointer
}
.btn-nav:hover .bar {
  background: #17BEBB
}
.bar {
  display: block;
  height: 50%;
  width: 100%;
  background: #fff;
  margin: 22% auto;
}
.btn-nav {
  z-index: 1070;
  display: block;
  padding: 0.8% 0;
  width: 3%;
  height: 4%;
  position: fixed;
  left: 2%;
  margin: 0 auto;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  min-height: 20px;
  min-width: 50px;
}
.btn-nav:focus {
  outline: none
}
.middle {
  margin: 0 auto
}
.bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}
.animated {
  z-index: 1070;
}
.animated .arrow-top-r {
  -webkit-transform: rotateZ(-45deg) translateY(180%);
  -moz-transform: rotateZ(-45deg) translateY(180%);
  -ms-transform: rotateZ(-45deg) translateY(180%);
  -o-transform: rotateZ(-45deg) translateY(180%);
  transform: rotateZ(-45deg) translateY(180%);
  width: 55%;
}
.animated .arrow-middle-r {
  -webkit-transform: translateX(50%);
  -moz-transform: translateX(50%);
  -ms-transform: translateX(50%);
  -o-transform: translateX(50%);
  transform: translateX(50%);
}
.animated .arrow-bottom-r {
  -webkit-transform: rotateZ(45deg) translateY(-180%);
  -moz-transform: rotateZ(45deg) translateY(-180%);
  -ms-transform: rotateZ(45deg) translateY(-180%);
  -o-transform: rotateZ(45deg) translateY(-180%);
  transform: rotateZ(45deg) translateY(-180%);
  width: 55%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button class="btn-nav">
    <div class="bar arrow-top-r"></div>
    <div class="bar arrow-middle-r"></div>
    <div class="bar arrow-bottom-r"></div>
  </button>
</body>

或者，您可以使用视口单位来指定 button 的尺寸。

$(".btn-nav").on("click tap", function() {
  $(".nav-container")
    .toggleClass("showNav hideNav")
    .removeClass("hidden");
  $(this).toggleClass("animated");
});

html {
  margin: 0 auto;
  height: 100%;
  -ms-content-zooming: none;
  -ms-touch-action: pan-x pan-y;
  -webkit-content-zooming: none;
  content-zooming: none;
}
body {
  font-family: 'PT Sans', arial, serif;
  margin: 0;
  background-color: black;
}
button {
  overflow: visible;
  z-index: 1070;
  background: none;
  border: none;
}
button::-moz-focus-inner {
  border: 0
}
:focus {
  outline: none
}
::-moz-focus-inner {
  border: 0
}
.btn-nav:hover {
  cursor: pointer
}
.btn-nav:hover .bar {
  background: #17BEBB
}
.bar {
  display: block;
  height: 50%;
  width: 100%;
  background: #fff;
  margin: 22% auto;
}
.btn-nav {
  z-index: 1070;
  display: block;
  padding: 0.8% 0;
  width: 4vh;
  height: 4vh;
  position: fixed;
  left: 2%;
  margin: 0 auto;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  min-height: 20px;
  min-width: 50px;
}
.btn-nav:focus {
  outline: none
}
.middle {
  margin: 0 auto
}
.bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}
.animated {
  z-index: 1070;
}
.animated .arrow-top-r {
  -webkit-transform: rotateZ(-45deg) translateY(180%);
  -moz-transform: rotateZ(-45deg) translateY(180%);
  -ms-transform: rotateZ(-45deg) translateY(180%);
  -o-transform: rotateZ(-45deg) translateY(180%);
  transform: rotateZ(-45deg) translateY(180%);
  width: 55%;
}
.animated .arrow-middle-r {
  -webkit-transform: translateX(50%);
  -moz-transform: translateX(50%);
  -ms-transform: translateX(50%);
  -o-transform: translateX(50%);
  transform: translateX(50%);
}
.animated .arrow-bottom-r {
  -webkit-transform: rotateZ(45deg) translateY(-180%);
  -moz-transform: rotateZ(45deg) translateY(-180%);
  -ms-transform: rotateZ(45deg) translateY(-180%);
  -o-transform: rotateZ(45deg) translateY(-180%);
  transform: rotateZ(45deg) translateY(-180%);
  width: 55%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button class="btn-nav">
    <div class="bar arrow-top-r"></div>
    <div class="bar arrow-middle-r"></div>
    <div class="bar arrow-bottom-r"></div>
  </button>
</body>

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

Internet Explorer 11 - Different behavior on measuring percent?

html

css

internet-explorer-11