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

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

转载作者：行者123 更新时间：2023-11-28 16:34:39

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

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

文章推荐： html - 第 n 个 child 选择器不工作

internet-explorer - 在同一台计算机上运行 Internet Explorer 6、Internet Explorer 7 和 Internet Explorer 8
像其他人一样，我需要在 Internet Explorer 6 和 Internet Explorer 7 上测试我的代码。现在，Internet Explorer 8 为开发人员提供了一些很棒的工具
internet-explorer - Internet Explorer 8 和 Internet Explorer 6 并排
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
internet-explorer - 如何从 Internet Explorer 11 降级到 Internet Explorer 10？
作为一名开发者，我发现新的 Internet Explorer 版本完全是一场噩梦。我关闭了 Windows 功能，但无法安装 Internet Explorer 10 。它说它已经安装，但事实并非如
internet-explorer - 博客URL崩溃Internet Explorer
我通过Blogger有一个博客-http://www.concertexperiencepeeps.com。每当我尝试通过Internet Explorer查看我的博客时，该页面都会崩溃，并且不允许我
internet-explorer-6 - Internet Explorer 6 和 Internet Explorer 7 在同一台计算机上进行调试
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
internet-explorer - 为什么即使在模拟 Internet Explorer 8 文档模式时，Internet Explorer 11 也不支持条件注释？
我正在使用新的Internet Explorer 11开发人员工具将文档模式切换为“8”，但条件注释仍然被忽略，也就是说，它们没有被正确解析并且表现得像普通注释。因此，浏览器不会请求/加载条件注释内的
internet-explorer-7 - 是否可以出于调试目的从 Internet Explorer 7 降级到 Internet Explorer 6？
我在我的一个站点上遇到 Internet Explorer 6 问题，我真的希望我安装它而不是 Internet Explorer 7。有没有一种快速的方法来做到这一点？最佳答案下载Microso
javascript - 对于 Internet Explorer 我应该使用什么来使 Internet Explorer 禁用 Internet Explorer 的默认下拉样式
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
internet-explorer - 如何从 Powershell 访问 Internet Explorer 运行实例的经典 Internet Explorer COM 自动化对象？
如何访问 Internet Explorer 运行实例的经典 Internet Explorer COM 自动化对象？也就是说，如果我在多个窗口中打开 Internet Explorer，如何从 Po
internet-explorer - Internet Explorer 中带有空格的内容处理附件文件名
string filename = Server.UrlPathEncode(Path.GetFileName(_Filename))); Response.AddHeader("Content-Di
internet-explorer - Internet Explorer 永远等待本地主机
当我尝试使用 Apache 2.2 在 Windows7(64 位)上的 IE9 或 IE10 中打开 localhost 时，解析 URL 需要很长时间。其他浏览器没有问题并立即解析 URL，只有
internet-explorer - 如何从批处理文件打开和关闭 Internet Explorer？
我有一个批处理文件，必须启动 Internet Explorer 并打开 www.google.com .当整个页面加载完成时，它应该终止 IE 进程，即关闭该系统中的所有 IE 实例。我的批处理文件
internet-explorer - Internet Explorer 的测试自动化
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6 个月前关闭。 Improve t
internet-explorer - Internet Explorer - 浏览时的奇怪形状
基本上，无论我使用 IE 访问哪个网站，我都可以看到那些黑色/白色形状，一旦我将鼠标移到它们上，它们就会消失。想知道是否有人知道可能导致这种情况的原因？另外:http://imageshack.c
internet-explorer - Internet Explorer 在哪里存储它的附加组件？
我检查了所有注册表，但找不到所有已安装扩展的列表。此时，IE 扩展/加载项的任何一般位置都会有所帮助。最佳答案取自 here : 浏览器帮助对象 - 旨在增强浏览器功能的浏览器插件。条目可以在
internet-explorer - 是否可以借助脚本在Internet Explorer 8的LAN设置中更改自动配置脚本地址？
我在Internet Explorer 8的LAN设置中使用了2个不同的自动配置脚本地址。在工作过程中，我需要经常在它们之间进行切换。每次我必须手动进行。有没有一种方法可以通过脚本等自动执行操作，以
internet-explorer - Internet Explorer 平滑滚动检测
这是一个两部分的问题。我正在构建一个网页，我需要知道: 有没有办法检测 IE 是否启用了平滑滚动(如果是，如何)？有没有办法强制 IE 关闭我网页的平滑滚动功能？明确地说，我不是在问如何关闭整个计
internet-explorer - Internet Explorer - 如何强制某些站点的兼容模式？
我想强制 IE10 在 IE9 模式下从我的 Intranet 呈现某些站点。我曾尝试使用本地兼容性列表但无济于事(%LocalAppData%\Microsoft\Internet Explore
internet-explorer - Internet Explorer 正在修改下载文件名
我在使用 IE8 时遇到问题，其中带有查询字符串的 URL 在下载时被破坏。特别是，像这样的 URL http://domain.com/software/Software%202.1%20Beta
internet-explorer - Internet Explorer 缓存文件上传？
我有一个非常基本的页面，其中包括元素。当我提交带有选定文件的表单时，服务器会响应一个在 Excel 中打开的电子表格(“新窗口”)。这种行为意味着初始屏幕和输入元素在 IE 中仍然可见。如果我更改所

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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