我们都知道IE11检测不能与服务器端语言一起使用，因为Microsoft已经删除了IE / MSIE浏览器指示，现在完全是“Mozilla”。

我也知道，做浏览器检测/版本是有风险的，但过去一直很好地服务于我们。

网站的一些要求是：

必须使用某些版本的Firefox及以上版本
必须使用某些版本的Chrome及以上版本
必须使用某些版本的safari(一些以下和一些较新的)
必须使用IE> = 8

所以这里是问题… IE11在我的列表中表示它不支持。我想从Web端的服务器端支持它(ASP.NET / MVC)

目前还不清楚如何从服务器端检测到这一点。有人知道吗

这是现在在IE 11中显示的用户代理：

“Mozilla / 5.0(Windows NT 6.1; WOW64; Trident / 7.0; rv：11.0)像Gecko”

rv：11.0告诉我们它的IE11，但是做一个解析仍然意味着，例如，它可能是某种版本的chrome，在这样的要求甚至firefox不支持。

那么，看看IE 11或更高版本的最好方法是什么？

我不太确定从“三叉戟”和向前搜索，因为我不知道其他浏览器是否使用。

欢迎任何方向。

使用正则表达式，如：

Regex.IsMatch(this.Request.UserAgent,@"Trident/7.*rv:11")

Trident是IE使用的渲染引擎的名称。一些其他应用程序也使用Trident引擎，您可以在维基百科的文章中看到。但是，在用户代理中搜索Trident不应该是一个问题，因为没有其他主要浏览器使用Trident。

只有IE11使用Trident版本7，所以如果你用正则表达式搜索Trident / 7，应该会找到IE11。

我的CSS中有这一行：

.ui-icon-zoom-in { content: url(images/16x16/ZoomIn.png); }

我和jQuery UI Button widget一起使用的是这样的：

$("#zoomin").button({ text: false,icons: { primary: "ui-icom-zoom-in" } });

在Chrome中,我可以在按钮中看到图像居中.但是,在IE10中,我没有看到图像.

我在这里错过了什么吗？

content属性仅在伪元素之前和之后有效.您应该将其更改为：

.ui-icon-zoom-in { 
  background: url(images/16x16/ZoomIn.png) no-repeat; 
  width:16px;
  height:16px;
}

除此之外,如果指定了有效的DOCTYPE,IE8仅支持内容属性.

我用它来同时显示：flex和margin：auto来实现这种布局：

这适用于支持FlexBox的每个浏览器,甚至是IE.
但是,如果没有一点例外,那就太容易了：最小高度.

你可以在这里找到一个简单的工作示例.在我的包装器上使用min-height时,最后一个元素不会被推到这个包装器的底部(仅限IE).

我无法得到这个,你们女孩/男人有什么想法吗？谢谢.

在IE11上测试

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  
  border: 1px solid grey;
  padding: 5px;
}
.element {
  height: 35px;
  
  border: 1px solid grey;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是IE的flexBox实现中的一个错误：

In all other browsers that support flexBox,a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

错误报告 – (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

这似乎是微软的关注点,未来将在某些方面得到修复：

Unfortunately,we are not able to address this Feedback in our upcoming release. We will consider your Feedback for a future release. We will keep this connect Feedback bug active to track this request.

微软的回复 – (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

目前,简单的解决方案是使用高度：

.wrapper {
  border: 1px solid grey;
  Box-sizing: border-Box;
  display: flex;
  flex-direction: column;
  height: 300px;
  padding: 5px;
}
.element {
  border: 1px solid grey;
  height: 35px;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

但是这有限制,如果添加更多.elements,盒子不会增长,所以可能不是你想要的.

虽然确实需要一个额外的包含元素,但似乎确实有一种实现这种方式的方式：

.container {
  display: table;
  min-height: 300px;
  width: 100%;
}
.wrapper {
  border: 1px solid grey;
  Box-sizing: border-Box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
  padding: 5px;
}
.element {
  border: 1px solid grey;
  height: 35px;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

这会添加一个容器(.container),将其设置为display：table;并给它max-height：300px;.身高：100％;然后添加到.wrapper以使其适合.container的整个高度(实际为300px),从而使IE的行为与其他浏览器相同.

兼容的浏览器会忽略这一点,并将继续遵循最小高度：300px;规则设置在.wrapper上.