Question

当我在IE11中查看它们时，我的页面处于一种丑陋的响应模式，但正如Chrome中预期的那样。这是我用来渲染屏幕大小的代码：

  @media screen and (min-width: 1100px) {
  #column {width: 75%;}
  #blue-nav{position: absolute;}
  #white-bar{display: block; }
  #footer-div {width: 100%;}
  #footer {width: 75%; position: relative}
  #body-left {float: left; width: 40%; height: auto;}
  #logo {position: relative;}
  #body-right {float: right; width: 60%; height: auto;}
  .breadcrumb {margin:0; padding: 0; padding-top: 50px;}
  #rectangle {  background: rgb(248,248,248);border-color: rgb(217,217,217);border-width: 1px;clear:both;  display: flex;}
  body {background-color:#f0f0f0;}
  #footer {display: block;} 
  #footer-table{display: table;}

}

以下是我的标题：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我不确定为什么他们在IE中看起来如此糟糕。此外，我的徽标周围有一个链接框，我的文字离开了屏幕。

Answer 1

@abluejelly是对的。添加

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

修好了。

Answer 2

原因是Internet Explorer误检测它需要在IE 8传统模式下加载页面。这通常是由可论证的愚蠢默认设置引起的，该默认设置使任何int ra 网站默认情况下加载IE8模式，即非标准和缺失功能的土地。

要解决此问题，您只需要通过添加此元标记告诉IE不要这样做：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

告诉IE，这不是IE 8文档。

请注意，必须是发送的第一个标头（<head />部分中的第一个标签），否则IE将会忽略它。

IE 11使用我的响应式设计

2 个答案: