浅谈js和css内联外联注意事项


Posted in Javascript onJune 30, 2016

简单说这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!!

问题:起因是网上看到一个css的表格样式,觉得挺好看,就打算放在自己的Asp.Net程序里,开始的时候我放在aspx文件里,显示正常

浅谈js和css内联外联注意事项

然后我就打算把css和js放在独立的文件里,这时候浏览器就疯掉了,显示的效果跟原先内联的时候完全不同,就好像压根没有看到我的css样式表一样,但是有部分样式又被执行了,有部分样式又被忽略了,比如表头的thead就被执行的好好的,但是表格的边框被强制成了2px;被一个小问题困扰真不爽!

浅谈js和css内联外联注意事项

解决:解决方法其实非常简单,把js和css文件里的所有HTML标记<>、注释<!-- -->,全部去掉,然后就ok了!

分析:昨天晚上查了相关资料里提到“浏览器在没有找到相关的样式表的时候,会用调用它内部的css渲染参数来工作”,

浅谈js和css内联外联注意事项

上图摘自大漠著:《图解CSS3:核心技术与案例实战》,这本书也是目前为数不多的css3的书,虽然看的是电子版,但是考虑会买一本!

用浏览器自带的开发人员工具一看,果然如此,它不能解释的时候,就私自调用了浏览器自带的渲染参数,下图中-webkit-开头的那两段,把表格的边框设为了2px;

浅谈js和css内联外联注意事项

看了一下自己的JS文件,把这一对HTML标记去掉<script type="text/javascript"></script>就ok了,里面的<!-- -->注释标记可以保留;

再看了一下自己的css文件,里面有<!-- CSS goes in the document HEAD or added to your external stylesheet -->,css样式文件里连HTML的注释也不能有,否则就会出现css被部分解释的奇怪现象,一去掉也就好了,真是太憋屈了,原来自己的错误居然就是这个小小的注释引起的。

那么css文件怎么写注释呢? 用c的注释方法就可以了/* 注释 */

以上这篇浅谈js和css内联外联注意事项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
javascript的this关键字详解
May 20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
js传值后台中文出现乱码的解决方法
Jun 30 #Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 #Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 #Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 #Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 #Javascript
浅谈JS中json数据的处理
Jun 30 #Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 #Javascript
You might like
PHP学习之PHP运算符
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
php图片裁剪函数
2018/10/31 PHP
JS 遮照层实现代码
2010/03/31 Javascript
javascript 函数使用说明
2010/04/07 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
详解python中index()、find()方法
2019/08/29 Python
学python需要去培训机构吗
2020/07/01 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
精彩的大学生自我评价
2013/11/17 职场文书
七年级地理教学反思
2014/01/26 职场文书
秘书英文求职信范文
2014/01/31 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
合作协议书模板2014
2014/09/26 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript