相关疑难解决方法(0)
IE11 flexbox防止文本换行？
我正在开发一个在最新版本的Firefox/SeaMonkey/Chrome中显示OK的网站,但有趣的是在IE11中存在渲染问题:http:
//devel.gooeysoftware.com/mozaddons/switching.php
如果你在IE11中加载它,左边的"从Firefox切换到SeaMonkey"菜单项不会将其文本换行到包含DIV的大小,而是溢出.我不明白为什么会这样.它只是IE11中的一个错误,还是我错过了一些CSS来包装它？
更新:
看起来他们在Edge中修复了一堆IE11 flexbox渲染错误.
IE11:
边缘:
推荐指数
解决办法
查看次数
使flexbox在IE11中继承适当的宽度
根据Chrome中的相同行为,div我们flex在IE11中有一系列组件.在下面的小提琴中,您将找到构成"列"结构的复选框元素,以及预期填充整个父级宽度的复选框元素.
在全宽复选框元素开始的第二行,该元素应该换行到下一行,因为.grid__item-flex它中的元素超过.grid__row了几个级别中可用的宽度.但是,在IE11上,该宽度不再受到尊重,因此.grid__item-flex继续溢出父元素的宽度.
失败的潜在解决方案包括强制执行宽度.grid__item-flex; 我们给它100%宽度,但上面的嵌套复选框元素将失去其列结构.此外,max-width: 100%当我们应用它时,属性似乎被忽略了.grid__item-flex.
是否有CSS解决方案,我们可以强制
.grid__item-flex尊重其容器宽度而不破坏它上面的嵌套列,并确保最后一个复选框元素(在它下面)保持在同一行？
可以在这里找到复制我的问题的JSFiddle.该示例在Chrome上按预期工作.更新于2018年11月,JSFiddle不再支持IE,因此除非我们在其他地方沙箱,否则此示例无效.
总而言之,Flexbox必须同时工作的两种情况:
1)ñ的数目div在换到下一行的行如果行宽度超过母体的宽度
- 我们可以使用
flex-wrap: wrap,但只有当元素具有正确的宽度时才能实现
2)div如果它自己的内容超过父亲的宽度,则包裹到下一行
我试过的事情:
将速记扩展
flex: 1为其完整属性,flex-grow flex-shrink flex-basis因为"IE10和IE11的默认值为0 0自动而不是0 1自动,根据草案规范,截至2013年9月"使用JS Polyfill for IE Flexbox,但项目不再被维护(并且不能作为修复工作)
使用Postpack的PostCSS插件尝试使用全局修复
flex: 1 1 0%应用
width: 100%溢出其父级的div会导致上面的嵌套列变成一个长列,因此虽然它部分地修复了溢出问题,但它首先打破了使用flexbox的目的(因为我们希望尽可能多divs地弯曲成一排).
推荐指数
解决办法
查看次数
如何在嵌套容器中使flexbox项正确收缩？
如果我设置一个嵌套的flexbox容器,如下所示:
<div class="container1">
<div class="grow1">
<div class="container2">
<div class="grow2"></div>
</div>
</div>
</div>
...然后设置grow2 的宽度,使其比container1 宽,然后grow2溢出container1.
我相信这应该不会发生,因为挠性元件都应该当它们比柔性容器较大的萎缩.
如果我设置grow2 的flex-basis,那么这可以按预期工作.
有关演示,请参阅以下示例:
https://jsfiddle.net/chris00/ot1gjjtk/20/
请使用Chrome或Firefox
此外,我读到flexbox规范说宽度和柔性基础应该具有相同的效果(当使用水平布局时),但它们显然没有.
现在我可以使用flex-basis而不是width,但是... Edge对flex-basis和width都做同样的事情,并且它以"错误"的方式执行.IE11也错了(虽然看起来有多个flexbox错误). 请查看Edge的演示.
那应该怎么做呢？
所有浏览器都有错误吗？
flex-basis实际上应该与宽度不同(在简单的水平布局中)？
或者Edge是否正确,宽度和flex-basis都应该溢出父容器？
最后,是否有解决方法可以解决Edge(甚至是IE11)的溢出问题？
.container1 {
margin-top: 10px;
display: flex;
width: 200px;
height: 50px;
background-color: red;
}
.grow1 {
flex-grow: 1;
height: 40px;
background-color: green;
}
.container2 {
display: flex;
height: 30px;
background-color: yellow;
}
.grow2a {
flex-grow: 1;
flex-basis: 400px;
height: 20px;
background-color: turquoise;
}
.grow2b …推荐指数
解决办法
查看次数
Bootstrap 4网格| 变量 - 固定变量| 宽度列,重叠在IE11上
具有一个固定宽度列的Bootstrap 4网格问题IE11
我有一个三列网格,其中中间列必须是固定宽度,左右列可以是变量/换行.
代码如下,使用我自己的类作为行包装器.Bootstrap是4.1.1
<div class='centered_content'>
<div class="row">
<div class="col-md">
variable width content
</div>
<div class="col-md m d-none d-md-block ">
Fixed width content
</div>
<div class="col-md l d-none d-md-block">
variable width content
</div>
</div>
</div>
.centered_content {
max-width:1130px;
margin: auto;
}
问题是在IE11(以及Android 4平板电脑上的"互联网"浏览器)中,当浏览器在最大宽度1100到大约800px之间(在小断点之前)调整大小时,右列与中间列重叠.在其他浏览器中,左右列收缩到足以允许中间保持其固定宽度.
下图说明了这一点.第一个展示了IE浏览器(以及所有其他浏览器)最大化浏览效果,第二张图片显示了宽度减小的Chrome(所需行为),最后一张图片显示IE宽度减小
我知道IE不完全支持flex所以猜测可能是问题.Edge适用于Chrome.任何解决方法？
推荐指数
解决办法
查看次数
IE11 CSS在flexbox内部显示内联块溢出
我在弹性框中使用了一个内容大的内联块元素,由于某种原因,Internet Explorer 11不会包装此元素的内容,而是将flexbox推出屏幕.它在Chrome和FireFox中呈现得很好.
我的问题示例:https://codepen.io/anon/pen/YVboBX
<div class="page">
<main>
<radio-widget>
<layout-container>
<section class="icon">X</section>
<section class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in ipsum id lectus egestas scelerisque sit amet ut libero. Nam luctus turpis nisi, ut mollis libero sodales eu. Donec ante ante, venenatis non sodales sed, venenatis id lacus. In ante
risus, lobortis et ligula eget, commodo euismod risus. Ut sem orci, ultrices eu finibus vel, aliquam et quam. Nunc bibendum sodales libero et pulvinar. Cras …推荐指数
解决办法
查看次数
在剩余空间中水平居中最大宽度 flexbox 项目
我有一个相当独特的情况，它似乎适用于除Internet Explorer 11之外的所有浏览器，因此这是我试图解决的主要用例。
我工作的一个想法，对于涉及利用网站布局display: flex;上<body>，以适应各种各样的布局情况。具体来说，一个是在一侧有一个“导航栏”，在左侧有一个站点的内容。flex-grow: 1;在内容上使用允许我填充导航栏后面的剩余空间，以及当我必须在某个断点隐藏导航栏时自动填充浏览器窗口的整个宽度。
但是，如果我将 a 添加max-width到内容并尝试使用 将其在剩余空间内居中margin: 0 auto;，它会在Internet Explorer 11 中失败。
/* Code to Troubleshoot
// ----------------- */
body {
display: -webkit-flex;
display: flex;
}
nav {
-webkit-flex-basis: 160px;
flex-basis: 160px;
z-index: 2;
}
main {
-webkit-flex: 1;
flex: 1;
position: relative;
min-width: 1px;
max-width: 400px;
margin: 0 auto;
z-index: 1;
}
/* Presentational Styles
// ------------------ */
* {
box-sizing: …推荐指数
解决办法
查看次数
Flex项目与IE11中的另一项重叠
我有两个div:
- top div包含一个占用多行的长文本
- 较低的div有
min-height和flex-grow: 1
当我减少窗口出现滚动时,然后在chrome中一切都正确显示.但在IE11中,顶部div减少到一行,其文本位于底部div的顶部.
我可以修复它只为顶部div的内容设置一些宽度(它适用于固定宽度,或钙宽度,但无法使用百分比宽度)如何在不设置宽度或宽度百分比(width:100%)的情况下修复它？
body,
html {
height: 99%;
padding: 0;
margin: 0;
}
.flexcontainer {
width: 25%;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid lime;
}
.allspace {
flex-grow: 1;
min-height: 300px;
background-color: yellow;
}
.longtext {
background-color: red;
}
.textcontainer {
border: 1px solid magenta;
/*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}<div class="flexcontainer">
<div class="longtext">
section 1 with long name section …推荐指数
解决办法
查看次数