标签: internet-explorer-11
Flexbox不在IE中垂直居中
我有一个简单的网页,其中包含一些以页面为中心的Lipsum内容.该页面在Chrome和Firefox中运行良好.如果我缩小窗口的大小,内容将填充窗口,直到它不能,然后添加滚动条并将内容从屏幕填充到底部.
但是,该页面不在IE11中.我可以通过弯曲身体让页面在IE中居中,但是如果我这样做,那么内容开始从屏幕上移到顶部并切断内容的顶部.
以下是两种情况.查看相关的小提琴.如果问题不明显,请减小结果窗口的大小,以便强制生成滚动条.
注意:此应用程序仅针对最新版本的Firefox,Chrome和IE(IE11),它们都支持Flexbox的候选推荐标准,因此功能兼容性不应成为问题(理论上).
编辑:使用全屏API全屏显示外部div时,所有浏览器都使用原始CSS正确居中.但是,在离开全屏模式时,IE将恢复为水平居中和垂直顶部对齐.
编辑:IE11使用非供应商特定的Flexbox实现.灵活的框("Flexbox")布局更新
在Chrome/FF中正确调整中心和调整大小,在IE11中无法居中但正确调整大小
小提琴:http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
无处不在的中心,在缩小时缩小顶部
小提琴:http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: …推荐指数
解决办法
查看次数
在IE11开发人员工具中"始终从服务器刷新"发生了什么？
Internet Explorer 11中的F12开发人员工具是否也具有IE 8-10中开发人员工具的"始终从服务器刷新"功能？
我看到网络工具上的"清除浏览器缓存...(Ctrl + R)"按钮,但点击它似乎什么都不做(之后Temporary Internet Files文件夹中仍然有文件).我还将"检查存储页面的更新版本:"设置设置为"每次访问网页时",但这似乎并不总是刷新外部资产.
可以在IE 11中完全禁用缓存以进行开发吗？
现在我只是按住Ctrl键并单击刷新按钮(按维基百科的说明绕过缓存),但这很容易忘记.
internet-explorer ie-developer-tools internet-explorer-11 ie11-developer-tools
推荐指数
解决办法
查看次数
Internet Explorer 11通过元标记禁用"在兼容性视图中显示Intranet站点"
我一直在Intranet网站超过6个月时我一直在使用下面的HTML5 doctype和边缘兼容性meta标签,迫使IE浏览器不效仿旧的浏览器版本,这已工作确定.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My title</title>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
</head>
<body>
</body>
</html>
我这样做的原因是因为我工作的地方使用策略设置来启用所有Intranet站点的兼容性视图,并且使用该EDGE设置的这种方法在Internet Explorer 9中有效.
一个多月前,我升级到Internet Explorer 11,该网站仍按预期工作.
如今,这个停止工作不如预期,我不能肯定地说,但我认为,这迫使兼容性视图策略中的IE11中未启用,现在是...,因为这已经开启兼容性meta标签不再做了预期的事情,这个站点正在模拟IE8的企业模式下运行.
有没有人知道如何解决这个问题并在强制执行兼容性"企业模式"时强制IE11在Intranet站点上使用？并且无法通过浏览器设置禁用？
编辑
我刚刚尝试在我的web.config中添加自定义标头,如本答案中所述 /sf/answers/1278004591/
这对我不起作用我仍然在开发人员工具栏控制台中收到以下消息
HTML1122: Internet Explorer is running in Enterprise Mode emulating IE8.
就好像版本8被视为edge在IE11中启用此Intranet兼容性设置时.
这篇文章:https://www.leapinggorilla.com/Blog/Read/1016/ie-ate-my-css---disabling-compatability-mode 解释得很好,我还没有尝试通过代码设置此标头我们的用户无权更改其浏览器设置..其他任何更改都没有.
UPDATE
请参阅我对此帖子的评论,了解企业模式和兼容模式之间的区别,因为它很重要.
html html5 compatibility internet-explorer internet-explorer-11
推荐指数
解决办法
查看次数
IE11文档模式默认为IE7.怎么重置？
我的Windows 8.1 Surface平板电脑上的Internet Explorer 11默认为文档模式7,导致许多网站呈现错误.
当我打开开发人员工具时,它声明由于Intranet兼容性设置,它默认为文档模式7.
但是,我没有手动更改这些设置,我正在浏览Internet页面!
我试图重置Internet Explorer设置没有任何运气.
有任何想法吗？
推荐指数
解决办法
查看次数
使用CSS功能/特征检测检测IE11
IE10 +不再支持浏览器检测标签来识别浏览器.
为了检测IE10,我使用JavaScript和功能测试技术来检测某些带ms前缀的样式,例如msTouchAction和msWrapFlow.
我想对IE11做同样的事情,但我假设所有的IE10样式也将在IE11中得到支持.任何人都可以帮我识别IE11中唯一可以用来分辨两者的风格或功能吗？
额外信息
- 我不想使用用户代理类型检测,因为它是如此的参差不齐,并且可以更改,我想我已经读过IE11故意试图隐藏它是Internet Explorer的事实.
- 有关IE10功能测试如何工作的示例,我使用此JsFiddle(不是我的)作为我测试的基础.
- 此外,我期待很多答案"这是一个坏主意......".我对此的需求之一是IE10声称它支持某些功能,但实现得非常糟糕,我希望能够区分IE10和IE11 +,以便将来继续使用基于功能的检测方法.
- 这个测试与Modernizr测试结合在一起,只会使一些功能"回退"到不那么迷人的行为.我们不是在谈论关键功能.
我也在使用Modernizr,但在这里没有用.我需要帮助解决我明确提出的问题.
推荐指数
解决办法
查看次数
在Angular 2中阻止IE11缓存GET调用
我有一个休息端点,它在GET调用上返回一个列表.我还有一个POST端点来添加新项目,还有一个DELETE来删除它们.这适用于Firefox和Chrome,POST和DELETE适用于IE11.但是,IE11中的GET仅适用于页面的初始加载.刷新返回缓存的数据.我已经在Angular 1中看过关于这种行为的帖子,但是Angular 2(发布候选者1)没有.
javascript http-caching typescript internet-explorer-11 angular
推荐指数
解决办法
查看次数
如何将IE11文档模式设置为默认边缘？
我的计算机上安装了Internet Explorer,但需要测试IE 7的兼容模式.将文档模式更改为IE 7后,将其设置为默认值,现在我无法更改它.IE7上的默认设置是什么？
如何设置文档模式默认值？
compatibility internet-explorer ie-developer-tools internet-explorer-11
推荐指数
解决办法
查看次数
IE11 - CSS变量是否存在polyfill/script？
我正在混合网络浏览器环境(Chrome/IE11)中开发网页.IE11不支持CSS变量,是否存在允许我在IE11中使用CSS变量的polyfill或脚本？
推荐指数
解决办法
查看次数
用于在IE11中无法单击的表单中输入的图像标签
问题
在IE11中,可以单击以下代码中的图像来激活/切换标签中的输入:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
虽然这个完全相同的代码但在a内部的图像<form>无法点击以激活/切换输入:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
请注意,在上面的示例动画中,我单击了第二个图像,但这不起作用,但点击文本可以正常工作(只是为了演示).
这已经过测试和转载:
- Windows 7 Pro SP1 x64上的IE 11.0.9600.16428.
- Windows RT 8.1平板电脑上的IE 11.0.9600.16438.
- Windows 7 Pro SP1 x64上的IE 11.0.9600.17105.
- Windows 10上的IE 11.0.10240.16431
在IE9,IE10,Microsoft Edge和其他浏览器中不会发生此问题.
问题:
- 在使用图像标签的情况下,这可以在没有 JS的情
- 如果没有,还有哪些其他可能的解决方案？
- (可选)为什么第二个示例中的图像不会触发输入元素(在第一个示例中执行)？
推荐指数
解决办法
查看次数
IE11上的Flexbox:图像无缘无故延伸？
我在IE11上遇到了与flexbox有关的问题,虽然我知道有很多已知问题,但我还是找不到解决方案......
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>BLAH</p>
</div>
</article>
</div>
而CSS ......
img {
max-width: 100%;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
.article-content {
padding: 20px 35px;
}
图像在弹性容器内被拉伸.
应用align-items: flex-start …
推荐指数
解决办法
查看次数
标签 统计
css ×4
html ×3
flexbox ×2
angular ×1
css3 ×1
html5 ×1
http-caching ×1
javascript ×1
polyfills ×1
sample ×1
typescript ×1