浅谈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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
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判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
python Matplotlib模块的使用
2020/09/16 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
求职意向书范文
2014/04/01 职场文书
低碳环保演讲稿
2014/08/28 职场文书
企业法人代表证明书
2014/09/27 职场文书
个人典型事迹材料
2014/12/30 职场文书
美术教师求职信范文
2015/03/20 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
钱学森电影观后感
2015/06/04 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
业余无线电通联Q语
2022/02/18 无线电