标签: internet-explorer-11

我有一个复杂的布局,我用Flexbox垂直和水平地对齐各种元素.

然后最后一个元素margin-right:auto;应用于向左推动元素(并否定它们的居中).

这在除了IE10/11之外的任何地方都能正常工作并且让我发疯.

HTML/CSS示例:

#container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

#second-item {
  margin-right: auto;
}

/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: red;
}
#container > div {
  background: blue;
  padding: 10px;
  outline: 1px solid yellow;
}

<div id='container'>
  <div …

似乎如果flex-wrap: wrap使用IE11,则IE11不会正确计算弹性项目宽度.

见http://jsfiddle.net/MartijnR/WRn9r/6/

每个4个盒子都有弹性基础:50%所以我们应该得到两行两个盒子,但在IE11中每个盒子得到一行.将边框设置为0时,它可以正常工作.

不知道这是一个错误,还是有办法使IE11表现(并仍然使用边框)？

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>

section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

PS在我的项目中,谢天谢地,只需要支持最新版本的流行浏览器,但IE11就是其中之一.

出于某种原因,IE11(仅IE11,与其他IE9和IE10一起测试)将不会在我一直在努力的网站上创建会话.所以这意味着诸如站点登录之类的基本功能将不起作用.

在其他浏览器上,这是完美的.

我研究了一下,发现IE不适用于带有下划线的域名...但是我的域名没有,所以可能是什么问题？谢谢!

我正在尝试在IE 11中调试一些javascript,我无法强制它在断点上停止.

debugger;line工作正常(在该行中停止调试器),没有debugger;行但在同一个地方设置断点的同一文件什么都不做(函数工作正常,但调试器不会在断点上停止).

Chrome和Firefox的调试器在相同位置停止断点.

有什么想法可能是这种行为的原因？

我创建了一个带有社交图标的列表.那些图标应该包裹在小屏幕上.

我使用flex-wrap: wrap;它在Firefox和Chrome中完美运行:

但Internet Explorer 11(和IE 10)不会破坏这条线:

代码笔示例

在这里查看代码:http://codepen.io/dash/pen/PqOJrG

HTML代码

<div>
  <ul>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
  </ul>
</div>

CSS代码

body {background: #000;}

div {
    background: rgba(255, 255, 255, .06);
    display: table;
    padding: 15px;
    margin: 50px auto 0;
}

ul {
        display: -webkit-flex;
        display: -ms-flexbox;
    display: flex;
        -webkit-flex-wrap: …

我收到了错误

严重错误:对象不支持此属性或方法addeventlistener

在IE 11浏览器中访问InfoPath表单页面(使用InfoPath启用列表表单,例如displayifs.aspx).

此错误特定于IE 11,页面在IE 10及更低版本中正常打开.根据这篇MSDN帖子,IE 11支持addEventListener.

有人对此有所了解吗？

此示例中的LHS flex子级具有1em填充,并且它将导致RHS溢出父级:

<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
        LHS
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
        RHS
    </div>

</div>

这是小提琴:

http://jsfiddle.net/GY4F4/6/

当柔性儿童有填充物时,如何消除溢出？box-sizing: border-box不起作用.

IE11不会也不会实现ES2015代理对象.然而,IE11的延长支持终止于2025年10月14日.

有没有办法为IE11填充代理对象？所有其他浏览器都支持Proxy.

如果是,那么我们今天都可以在生产中使用它.如果没有,那么我们将不得不等待近十年......

编辑:我专门针对IE11,因为我知道IE通常具有我通常不知道的IE特定功能.

Edit2:我特别感兴趣的是能够实现一个全能拦截器.与__getattr__Python 类似.它只需要在IE11中工作.

在我正在处理的网站的CSS中,我们使用以下CSS来隐藏Internet Explorer 10和11添加到输入字段的"x"按钮,以便用户清除其内容:

input::-ms-clear {
  display: none;
}

在Windows 10 Build 10049上的第一个Microsoft Edge版本(以前代号为"Project Spartan")中查看同一个网站,这个CSS没有任何效果.这并不奇怪,因为Microsoft Edge正在脱离Internet Explorer的遗产,但我想达到同样的效果.

Microsoft Edge不能渲染它的等效CSS是什么？

我正在尝试使用基于flexbox的布局来为我的页面获取粘性页脚.这适用于Chrome和Firefox,但在IE11中,页脚位于我的主要内容之后.换句话说,主要内容没有拉伸以填充所有可用空间.

这里的例子 - http://jsfiddle.net/ritchieallen/3tpuryso/

HTML:

body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header, footer  {
    background: #dd55dd;
}
main {
    background: #87ccfc;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}

CSS:

<body>
    <header role="banner"><h1> .. </h1></header>
    <main role="main">
        <p>.....</p>
    </main>
    <footer>...</footer>
</body>

在IE中 - 当容器高度单位以vh为单位测量时,如何在flex布局中获取主元素？我想看看这个行为是否是IE实现flexbox规范的方式中的错误的结果,但我在其他地方找不到任何提及此问题的方法.