浅谈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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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 字符转义 注意事项
2009/05/27 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
jquery remove方法应用详解
2012/11/22 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
python利用OpenCV2实现人脸检测
2020/04/16 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python 串口读写的实现方法
2019/06/12 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
司机辞职报告范文
2014/01/20 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
自我推荐信格式模板
2015/03/24 职场文书
大学生十八大感想
2015/08/11 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
详解Python中的进程和线程
2021/06/23 Python
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
原生JS实现分页
2022/04/19 Javascript