Question

我正在使用vaadin来创建一个Web应用程序。我想将 legacy-styles.css 导入我的 styles.css

我的styles.css如下：

@import "../reindeer/legacy-styles.css";

.v-app {
    background: yellow;
}

然后使用morderniz来瞄准IE8

Element head = response.getDocument().head();

        Element meta = head.appendElement("meta");
        meta.attr("name", "viewport");
        meta.attr("content", "width=device-width, initial-scale=1, maximum-scale=1");


        // Meta tag to force IE8 to standard mode
        String ie8Meta = "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">";
        head.prepend(ie8Meta);

// some other stuffs ...

        // Adding modernizr library to target ie8
        // http://modernizr.com/docs/
        String modernizr = "<script type=\"text/javascript\" src=\"//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js\"></script>";
        head.prepend(modernizr);

奇怪的是，旧版样式在IE10中正确加载。然后legacy-styles.css不会在IE8中加载

报告的错误是

com.vaadin.client.VConsole
SEVERE: CSS files may have not loaded properly.

我试图重新排列moderniz.js（使用append而不是prepend）但是没有工作

Answer 1

在我们深入研究手头的问题之前，使用@import是一个非常糟糕的主意。虽然这对您来说很方便，但这意味着访问您网站的每个用户都必须下载文件（文档本身），以便下载另一个文件（包含@import的文件）字符串）只是下载另一个文件。除了DNS解析和tcp握手之外，您可能会在服务器和计算机之间进行多达十几次往返，只是为了获得这个单一文档。使用css预编译器（例如sass或更少），并将旧文件与新文件连接成一个压缩文件会好得多。

接下来，不应该使用modernizr来定位IE8或任何浏览器。这实际上完全违背了Modernizr的目的 - 它专门用于特征检测，而不是浏览器检测。这意味着，不是说你想要＆＃34;目标IE8＆＃34;，你会更多地想到那些缺乏特征X＆＃34;的目标浏览器。（svg，地理位置，圆角等）。

话虽如此，有很多理由专门针对Internet Explorer的版本，但是现代化并不是这样做的。更正确的方法是使用IE的条件类

<!--[if IE 8]>
    //IE specific stlyes here
<![endif]-->

你所展示的任何内容都与IE特定代码无关，而且由于modernizr本身并没有添加任何功能，因此我们并不清楚为什么IE 10会做任何不同的事情。

vaadin legacy-styles.css不会在IE8中加载

1 个答案: