0

我正在将带有 javascript 的 .css 文件添加到头部，并以最高优先级最后和最低优先级对它们进行排序。

喜欢：

base.css
theme.css
responsive.css

这适用于我尝试过的除 IE 之外的所有浏览器（我测试过 IE8、9 和 10），但如果我颠倒顺序：

responsive.css
theme.css
base.css

它适用于 IE(8,9,10)，但不适用于每个现代浏览器。

是否有任何 IE 优先级错误？如果我静态添加文件没有问题，那么它似乎是一个 javascript 问题，但仅适用于 IE。

有人知道这个问题甚至解决方案吗？

4

3 回答 3

0

这是因为旧版本的 IE 不理解响应式设计中使用的媒体查询，我猜在您的 responsive.css 中您有类似@media screen and (min-width: 960px).

通常条件注释用于检测当前浏览器是否为 IE（及其版本）并加载 css 文件。

我个人喜欢响应式设计时的移动优先理念，有一个示例教程： http: //gomakethings.com/mobile-first-and-internet-explorer/

这称为渐进增强。首先为最简单的平台做 css，然后为较新的浏览器添加东西。

如果您想要选项，还有另一种称为Graceful Degradation的做法，它是相反的，拥有全功能的 CSS 并忽略/删除旧浏览器的这些功能。

如果你真的想做干净和良好的响应式设计，你应该在谷歌上搜索一下这两种做法以更好地理解它们

于 2013-09-23T10:08:46.960 回答
0

一种解决方案是首先使用 javascript 检查使用了哪种浏览器。

BrowserDetect.browser

之后使用 if-else 语句..

if(IE){
  responsive.css
  theme.css
  base.css
}
else{
  base.css
  theme.css
  responsive.css
}
于 2013-09-23T10:03:45.390 回答
0

一定有另一个问题，因为 IE 和其他浏览器在层叠样式表的方式上并没有什么不同。请创建一个 JSfiddle。

于 2013-09-23T10:14:55.990 回答