浅谈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 高亮显示文本中重要的关键字
Dec 24 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
JavaScript实现4位随机验证码的生成
Jan 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php基础知识:控制结构
2006/12/13 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP积分兑换接口实例
2015/02/09 PHP
微信access_token的获取开发示例
2015/04/16 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
一套.net面试题及答案
2016/11/02 面试题
中学生操行评语
2014/04/24 职场文书
歼十出击观后感
2015/06/11 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers