浅谈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 相关文章推荐
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php中session使用示例
2014/03/29 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php 浮点数比较方法详解
2017/05/05 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python tornado使用流生成图片的例子
2019/11/18 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
优秀共产党员先进事迹材料
2014/05/06 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
先进党支部事迹材料
2014/12/24 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python