其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下!

--------------------------------------------------------------写在前面的话

   [IE浏览器没有加载CSS或js文件的秘密]

如果有哪一天,你突然发现自己写的的脚本不起作用了,而这一切又只是发生在IE浏览器上,你会怎么办?你是认为自己写的程序有问题呢?还是认为IE处理程序有问题?其实这个问题想都不用想,肯定是我们写的程序有问题。因为我们是程序员,我们要解决的方案就是做一款兼容所有主流浏览器的应用程序。如果应用程序有问题,那就是我们的解决方案不成熟。

        这个问题已经发现很久了,只是一直忙于系统功能的开发,而没有去解决浏览器的兼容方案。最近得空,终于有机会去解决一下这个难题,先描述一下这个Bug的表现形式。界面在FireFox等浏览器下页面显示正常,而在IE浏览器下某些CSS样式没有应用上,注意并不是所有的CSS没有起作用,只是有一部分CSS在IE下没有起作用,这里我们可以排除没有引用JS文件或者引用JS路径不正常的问题了。
        出现上述问题,我们的第一反应通常都是CSS语法不标准引起的,这些CSS语法在FireFox下可以识别,但是在IE下却不会识别,我们知道不同浏览器处理解析CSS样式表是有一定区别的。不错,我也怀疑自己的CSS语法不规范,但是经过仔细审核后,我发现并非是语法问题。第一,CSS语法采用了标准的通用语法,在各个浏览器下都是相同的;第二,在IE浏览器下,并没有嗅探到相应的class。由此可以断定,应该是那些CSS文件没有被正确引入。
        但是我们的CSS文件引入方式都是一样的,并且都是放在CommonThemes同一个文件下进行引用,这样做有两个好处:一是便于管理CSS文件;二是减少了因引用路径不正确而造成的错误。照常理来说,这样做是不该出问题的,然而这也正是那个不按常理出牌的IE的问题所在。
        原来在IE浏览器下,通过使用<script type = "javascript"/>来引用文件时,IE仅能识别31个文件。如果在引用的文件大于31个,IE就会自动过滤掉。因为我们将整个系统的CSS文件全都是放在CommonThemes目录下,远远大于31个。所以在第31个CSS文件之后的文件,就不再起作用了。
    既然这样,我们就必须把CSS文件分拆放到不同的<script>标签下,以防止一个<script>标签加载CSS文件数量超过31个。我们的解决方案是按照系统的架构及业务需求将CSS引用文件分为多个文件,保证每个文件下CSS的路径数量不超过31个。
        IE最多只允许引用31个文件,一般情况下,我们确实不需要在一个脚本下引入这么多的文件。IE之所以这样做,可能是想提高系统运行的效率,防止内存泄露等。只不过仅凭它的一己只想,就进行了文件过滤,实在是大大的不该。别忘了,程序员的目标是解决问题,而非制造问题。

 

     [解决方法]

     主要思路是 压缩js和css文件

     可以利用.net mvc4的新特性Bundle特性解决.如果是mvc4以下的版本,可以尝试以下操作.

1、降了目标框架之后,vs报一个警告:NuGet程序包是使用不同于当前目标框架的目标框架安装的,需要更新System.Web.Http,之前有用过NuGet,

但是只是用它来添加需要的程序集, 没有更新过啊。

解决:搜索之,不难找到答案,在NuGet的命令窗口,使用Update-Package 程序包名 来更新,对于只使用管理NuGet程序包窗口的人来说,命令窗口在哪呢?

打开窗口,使用命令 update-package System.Web.Http 更新即可。

2、第一次见到使用Bundle时候,觉得有这个之后多处引用js或者css的时候写的就方便了,现在知道了它更大的用处是对js或者css文件进行合并压缩。

具体怎么用呢,不知道了,好解决,再单独新建一个mvc4的基本样例程序查看一下。

问题: 首先需要在App_Star文件夹下新建一个BundleConfig.cs类,定义RegisterBundles方法,需要BundleCollection对象作为参数,发现没有BundleCollection类

解决:程序添加对System.Web.Optimization.dll的引用,类中添加using System.Web.Optimization

问题:BundleConfig.cs类写好了,在Global.asax文件的Application_Start方法中注册了,那在页面View中用吧,但是写@Styles.Render时怎么也不出提示,

怎么没有呢? 在样例页面上也没看到有引用命名空间呢?

解决:原来这个命名空间是需要在web.config中添加的,在程序目录下有个web.config ,在View文件夹下也有个web.config,在两个文件中都加上

<add namespace="System.Web.Optimization"/> ,具体位置你一看web.config就知道了。

问题:OK,都写好了运行一下吧,我去,出异常了。第一眼就看见提示“使用相对路径时,请确保当前目录是正确的”,难道说是BundleConfig.cs定义的文件路径有问题?

问题是没有加载WebGrease

解决:程序添加引用:Antlr3.Runtime.dll 和WebGrease.dll,在程序根目录下的web.config中添加以下节点

问题:程序运行起来,没有报错,以为一切ok了,却发现Jquery.min.js文件没有引用上?

解决:上边说到了bundle有对文件压缩的功能,文件名中有min它就不引用了,所以把文件名中的min去掉,改成Jquery.js就可以了。

搜索过程中有篇文章说

new ScriptBundle("~/bundles/js/jqueryContent") 中的的名字 不能有特殊符号。比如 . - 否则无效呀。地址

总结:在使用bunle过程中需要引用三个dll,在web.config中做两处的配置,我想我如果不从0开始写,我不会知道这些。

[另外]  可以更新下vs的最新版NuGet来简化这三个dll的引用.

NuGet命令窗口,选择要添加到的项目,然后:   Install-Package Microsoft.AspNet.Web.Optimization 即可.

Antlr3.Runtime.dll 和WebGrease.dll 是Optimization的依赖引用,NuGet会自动为你添加的.

IE浏览器没有加载CSS或js文件的秘密及解决办法的更多相关文章

  1. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  2. eclipse中的js文件报错的解决办法

    在使用别人的项目的时候,导入到eclipse中发现js文件报错,解决办法是关闭eclipse的js校验功能. 三个步骤: 1. 右键点击项目->properties->Validation ...

  3. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  4. Win7下VS2008安装cocos2d-2.0-x-2.0.4模板时, 运行InstallWizardForVS2008.js文件执行失败的解决办法

         今天在Win7环境下的VS2008中安装cocos2d-x模板的过程中,当点击InstallWizardForVS2008.js时,弹出" 没有文件扩展'.js'的脚本引擎&q ...

  5. JavaScript动态加载CSS和JS文件

    var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...

  6. 动态加载CSS,JS文件

    var Head = document.getElementsByTagName('head')[0],style = document.createElement('style'); //文件全部加 ...

  7. .NET Web后台动态加载Css、JS 文件,换肤方案

    后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...

  8. 使用springMVC时无法加载CSS和JS文件

    解决办法:在spring配置文件里加上  <mvc:default-servlet-handler/>

  9. CI模板加载css和js

    1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config-&g ...

随机推荐

  1. Light oj 1085 - All Possible Increasing Subsequences (简单dp + 离散化 + BIT)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1085 题意: 问你有多少个上升子序列. 思路: dp[i]表示以第i个数结尾的 ...

  2. maven项目对于maven远程仓库没有资源的解决办法

    下载资源到本地 方法一:dependency scope 是system 类型 <dependency> <groupId>edu.ucar</groupId> & ...

  3. AnsiString类型定义的时候可以直接指定代码页,比如950繁体字,936日文

    procedure TForm3.FormCreate(Sender: TObject); type AnsiStringForPage = type AnsiString(950);//代码页 va ...

  4. layer的alert、prompt等操作如何响应键盘的回车和ESC操作

    layer.prompt({title: '请输入数据', formType: 1, //隐藏用户输入内容 // 这个是确定按钮的事件 "success":function(){ ...

  5. CD_Lulu软件著作权中软件分类号

    计算机软件著作权 登记中使用的软件分类编码指南 一.计算机软件著作权登记中使用的软件分类编码的结构采用组合代码结构,由9位数字组成并按照从左至右的顺序排列,前5位数字代表计算机软件分的代码:后4位数字 ...

  6. DICOM医学图像处理:Deconstructed PACS之Orthanc

    背景: 此篇博文介绍一个开源的.基于WEB的DICOM Server软件.该开源软件完全使用C++编写,不依赖于第三方数据库(内置了SQLite数据库)或其他框架,支持RESTful API设计模式. ...

  7. stateMachine 相关知识

    一个state的基本构造,processMessage 以及可选的enter exit 和getName. processMessager是用于处理数据. enter 和exit 则是类似于 面向编程 ...

  8. poj 2528(区间改动+离散化)

    题意:有一个黑板上贴海报.给出每一个海报在黑板上的覆盖区间为l r,问最后多少个海报是可见的. 题解:由于l r取值到1e7,肯定是要离散化的,但普通的离散化会出问题.比方[1,10],[1,4],[ ...

  9. angular - 介绍

    导入全局样式,生产环境和浏览器环境都导入了. 不知否你还记得index.html那个里面的节点 熟悉吗? 很熟悉吧

  10. update tableView contenSize

    NSIndexPath *messageIndexPath = [NSIndexPath indexPathForRow:afterRowCount-1 inSection:0];    [self. ...