如何从IE10及以上版本排除样式表

Question

我有几个不同的样式表，其中一个有@media查询，由于某种原因在IE中无论屏幕大小都被加载。@media查询在我的主Site.css文件中，所以我把它们移到了一个适用于所有浏览器的"新"样式表中。如果把它们放在IE特定的样式表中，并从所有其他样式表中删除它们，那么一切都按计划进行，因为我的目标是IE10，如果正确的浏览器加载添加了IE10类，所以我很好。问题是，我需要那些@media查询的东西在所有其他浏览器上工作，因为IE10及以上已经停止使用条件语句，我不能通过使用<!--[if !IE]评论排除"新"样式表。

如果我使用:

<!--[if !IE]>
<link href="@Url.Content(string.Format("{0}/css/search-media-queries.css", Model.RequestAuthorityUrl))" rel="stylesheet" type="text/css" />
<![endif]-->

它似乎在所有IE上工作，但它不加载其他浏览器的样式表。样式表位置的语法有点奇怪，但这是有目的的，它与问题无关，所以我不想用

来混淆这个问题

关于我应该如何去添加这些样式的所有浏览器，除了ie，然后我可以有他们在ie特定的样式表，所以他们不会立即加载，打破我的布局的建议。我明白这可能听起来令人困惑，这是一个很难弄清楚的bug，因为我也无法在IE inpsector中看到我的代码来调试，所以我不得不拿出CSS，直到我最终注意到它是什么。

原始问题:发生的事情是，我有一个div与一些输入，并使该div响应和调整与@媒体查询。如果我加载页面的div和它的内容显示，如果已经使用@media查询之一，虽然浏览器的大小是@media查询的范围之外。如果我调整浏览器的大小(让它更小)，然后我把它设置回适合我的屏幕的完整尺寸，然后正确的布局应用。

更新CSS代码示例:

@media screen and (max-width: 1222px)
{
    div#spiSearchWidget
    {
        width: auto;
    }
    div#spiSearchWidget #spiStartDate
    {
        margin-right: 20px;
        margin-bottom: 0px;
    }
     div#spiSearchWidget .endDate
    {
    }
     div#spiSearchWidget .adultLbl
    {
        margin-right: 58px;
        margin-left: 20px;
    }
     div#spiSearchWidget .childLbl
    {
        margin-bottom: 0px;
    }
    div#spiSearchWidget select#Children
    {
        margin-left: 10px;
    }
     div#spiSearchWidget #spiSrchBtn
    {
        clear: none;
        margin: 20px 70px 0px 70px;
    }
}
@media screen and (max-width: 1104px)
{
    #spi-walkin-searchbox .availContLrg
    {
        width: 20%;
    }
    div#spiSearchWidget
    {
        width: auto;
    }
    div#spiSearchWidget #spiStartDate
    {
        margin-left: 20px;
        margin-bottom: 10px;
    }
     div#spiSearchWidget .endDate
    {
        clear: both;
        margin-left: 10px;
    }
     div#spiSearchWidget .adultLbl
    {
        margin-left: 42px;
        clear: both;
    }
     div#spiSearchWidget .childLbl
    {
        clear: both;
        margin-bottom: 0px;
        margin-left: 34px;
    }
    div#spiSearchWidget select#Children
    {
        margin-left: 10px;
        clear: both;
    }
     div#spiSearchWidget #spiSrchBtn
    {
        clear: both;
        margin: 20px 20px 0px 20px;
    }
}

由于某些原因，所有这些都是从一开始加载的

Answer 1

你的问题不在于排除样式表，而在于如何让它在所有现代浏览器中正常工作。他们删除条件注释是有原因的。

IE10在渲染方面还不错。我个人从来没有遇到过响应式代码和IE9+的问题。也许发布一个片段，让我们看看你是怎么做的?

Answer 2

我发现这很有帮助，从http://www.impressivewebs.com/ie10-css-hacks/

if (/*@cc_on!@*/false && document.documentMode === 10) {
    document.documentElement.className+=' ie10';
}