浅谈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 相关文章推荐
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JS中数组重排序方法
2016/11/11 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
浅谈Python协程
2020/06/17 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
主持人婚宴答谢词
2014/01/28 职场文书
通信研究生自荐信
2014/02/01 职场文书
后备干部推荐材料
2014/12/24 职场文书
房屋所有权证明
2015/06/19 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
SpringBoot详解执行过程
2022/07/15 Java/Android