浅谈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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JS 遮照层实现代码
Mar 31 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
js实现图片3D轮播效果
Sep 21 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
医学生个人求职信范文
2013/09/24 职场文书
干部下基层实施方案
2014/03/14 职场文书
投资合作协议书
2014/04/17 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2014年组织部工作总结
2014/11/14 职场文书
2014年话务员工作总结
2014/11/19 职场文书
检讨书模板
2015/01/29 职场文书
三八节祝酒词
2015/08/11 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android