草庐IT

html - 带溢出的嵌套 flexbox 在 IE10+ 中不起作用

coder 2023-08-03 原文

我的 Web 应用程序中有一个 UI 元素用作悬停面板。面板本身有页眉、页脚和内容元素。面板将有一个最大高度以避免面板溢出窗口(这在 window.onresize 事件中更新)。

因为我只需要支持 IE10 及更高版本，所以我使用 flexbox 来支持这种布局。

我已经设法让这个跨浏览器工作:http://jsfiddle.net/Pyn9e/9/

尝试减小“结果”面板的大小，您会看到内容面板开始滚动而不是溢出，但仍确保页眉和页脚不会消失。

function setMaxHeight() {
  var maxHeight = $(window).height() - 16;
  $("#panel").css({
    height: maxHeight + "px"
  });
}

$(window).on("resize", function() {
  setMaxHeight();
});
setMaxHeight();

var i = 0;

setInterval(function() {
  var ul = $("#list");
  ++i;
  if (i <= 20) {
    var li = $("<li>").text("Item " + i);
    ul.append(li);
  } else if (i <= 40) {
    ul.children().last().remove();
  } else {
    i = 0;
  }
}, 60);
.flex-container {
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
}

.flex-fixed {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

.flex-var {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

#panel {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 200px;
  color: white;
  overflow: hidden;
}

#panel > header {
  background: red;
}

#panel > .content {
  background: blue;
  overflow-y: auto;
}

#panel > footer {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="panel" class="flex-container">
  <header class="flex-fixed">This is the header</header>
  <div class="flex-var content">
    <ul id="list">
    </ul>
  </div>
  <footer class="flex-fixed">This is the footer</footer>
</div>

但是，面板的内容是动态的，通常需要承载另一个 flexbox(例如另一个页眉、页脚、内容)。这在 Chrome 和 Firefox 中似乎很容易做到，但我无法让 IE10 和 IE11 工作:http://jsfiddle.net/Pyn9e/11/

正如您将在 IE10 和 IE11 中看到的那样，面板现在会溢出窗口而不是开始滚动。

function setMaxHeight() {
  var maxHeight = $(window).height() - 16;
  $("#panel").css({
    height: maxHeight + "px"
  });
}

$(window).on("resize", function() {
  setMaxHeight();
});
setMaxHeight();

var i = 0;

setInterval(function() {
  var ul = $("#list");
  ++i;
  if (i <= 20) {
    var li = $("<li>").text("Item " + i);
    ul.append(li);
  } else if (i <= 40) {
    ul.children().last().remove();
  } else {
    i = 0;
  }
}, 60);
.flex-container {
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
}

.flex-fixed {
  flex: 0 0 auto;
  -ms-flex: 0 0 auto;
}

.flex-var {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

#panel {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 200px;
  color: white;
  overflow: hidden;
}

#panel > header {
  background: red;
}

#panel > .content {
  background: blue;
}

#panel > footer {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="panel" class="flex-container">
  <header class="flex-fixed">This is the header</header>
  <div class="flex-container flex-var content">
    <header class="flex-fixed">Content</header>
    <ul id="list" class="flex-var" style="overflow-y:scroll; padding: 0; margin:0">
    </ul>
  </div>
  <footer class="flex-fixed">This is the footer</footer>
</div>

任何人都可以看到我可以在不过多改变布局的情况下支持 IE 的方法吗？谢谢。

最佳答案

IE前缀值应该是-ms-flexbox，而不是-ms-flex

在您的两个示例中，您都使用了不正确的浏览器前缀值:-ms-flex。

正确的flexbox prefix value for IE是 -ms-flexbox。

此外，您不需要使用 JavaScript 来设置窗口调整大小时容器的高度；您可以通过在 CSS 中设置 #panel 的 height 来获得相同的结果:

#panel {
    …
    height: calc(100% - 16px);
    …
}

或者，因为#panel是绝对定位的，通过设置bottom位置:

#panel {
    …
    bottom: 8px;
    …
}


var i = 0;

setInterval(function() {
  var ul = $("#list");
  ++i;
  if (i <= 20) {
    var li = $("<li>").text("Item " + i);
    ul.append(li);
  } else if (i <= 40) {
    ul.children().last().remove();
  } else {
    i = 0;
  }
}, 60);
.flex-container {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
}

.flex-fixed {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

.flex-var {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

#panel {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 8px;
  width: 200px;
  color: white;
  overflow: hidden;
}

#panel > header {
  background: red;
}

#panel > .content {
  background: blue;
  overflow-y: auto;
}

#panel > footer {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="panel" class="flex-container">
  <header class="flex-fixed">This is the header</header>
  <div class="flex-container flex-var content">
    <header class="flex-fixed">Content</header>
    <ul id="list" class="flex-var" style="overflow-y:scroll; padding: 0; margin:0">
    </ul>
  </div>
  <footer class="flex-fixed">This is the footer</footer>
</div>

关于html - 带溢出的嵌套 flexbox 在 IE10+ 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23398176/

flexboxhtmlflexcode34cssinternet-explorerinternet-explorer-10

有关html - 带溢出的嵌套 flexbox 在 IE10+ 中不起作用的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  4. ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2

    我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？ 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  8. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  9. Ruby——嵌套类和子类是一回事吗？ - 2

    下面例子中的Nested和Child有什么区别？是否只是同一事物的不同语法？classParentclassNested...endendclassChild 最佳答案 不，它们是不同的。嵌套:Computer之外的“Processor”类只能作为Computer::Processor访问。嵌套为内部类(namespace)提供上下文。对于ruby​​解释器Computer和Computer::Processor只是两个独立的类。classComputerclassProcessor#Tocreateanobjectforthisc

  10. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

随机推荐