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

标签 html css internet-explorer-11

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

$(".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 显示器(或非常不同的分辨率)或缩放不兼容(这在触摸屏显示器 + 窗口上确实很难避免)。

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

这里的margin似乎是:

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

不正确，但我不知道如何解决。

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

最佳答案

这似乎是因为 IE 没有正确计算 button 的 height。

当使用 position: fixed; 时，元素的位置和尺寸应该相对于初始包含 block 进行计算:

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 这将导致 height button 被设置为 auto。这可以通过将 height: 100%; 添加到 body 来克服，这样 button 的 height 就可以相对于它计算。

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

还有一个小错字需要改正:

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

应该是:

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

您可能还想设置 min-height 和 min-width 以确保在视口(viewport)高度非常小时显示 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>

或者，您可以使用视口(viewport)单位来指定按钮的尺寸。

$(".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>

关于html - Internet Explorer 11 - 测量百分比的不同行为？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34784557/

上一篇：javascript - 带有css的圆形显示动画

下一篇：jquery - 如何将数据属性字符串值转换为html元素？

相关文章：

html - 使用 bg-color 设置 p 元素的宽度以自动调整为文本长度？

html - 在 img 标签中，图像尺寸已动态更改

html - IE 中的表格布局错误(7)

javascript - 将用 .html() 更改的 td 之前的前置图标

html - 添加填充会向元素添加不需要的宽度，修复了吗？ CSS

javascript - 第一次调用后在动画结束符上执行函数

internet-explorer - IE 11支持深度cloneNode吗？

html - 触摸设备上的可拖动属性

TinyMCE复制粘贴IE11

reporting-services - SSRS 报表查看器 - 报表图表无法在 IE11 中显示

©2024 IT工具网  联系我们