Question

我有几个不同的样式表，并且有一个@media查询由于某种原因正在加载，无论IE中的屏幕大小如何。 @media查询位于我的主Site.css文件中，因此我将它们移到了一个新的＆＃39;所有浏览器的样式表。如果将它们放在IE特定样式表中并从所有其他样式表中删除它们，那么一切都按计划工作，因为我使用JS添加了ie10类，如果正确的浏览器加载，那么我很好。问题是我需要那些@media查询的东西才能在所有其他浏览器上运行，并且由于IE10及以上版本已经停止使用条件语句，因此无法排除“新的”＃39;样式表使用<!--[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特定的样式表中，这样它们就不会立即加载并破坏我的布局。我明白这可能听起来很混乱，并且是一个很难弄清楚的错误因为我也无法在IE incenctor中看到我的代码进行调试所以我不得不取出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 +的问题。也许发布一个片段，这样我们就可以看到你是怎么做到的？

Answer 2

我发现这有用，来自http://www.impressivewebs.com/ie10-css-hacks/

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

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

2 个答案: