css - IE 11 使用我的响应式设计

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 中看起来如此糟糕。此外，我的 Logo 周围有一个链接框，并且我的文字从屏幕上消失了。

Answer 1

@abluejelly 是正确的。添加

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

修复它。