css - 如何从 IE10 及更高版本中排除样式表

Question

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

如果我使用:

<!--[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 特定样式表中，这样它们就不会立即加载并破坏我的布局。我知道这听起来可能令人困惑，并且是一个很难最终弄清楚的错误，因为我也无法在 IE inpsector 中看到我的代码进行调试，所以我不得不取出 CSS，直到我终于注意到它是什么。

原始问题: 发生的事情是我有一个带有一些输入的 div，并使该 div 响应并使用@media 查询进行了调整。如果我加载页面，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+ 的问题。也许发布一个片段，让我们看看你是怎么做的？