解决错误:“废弃 document 元素之后的内容”——HTML5新特性,局部样式表

  最近正在学习angularjs,不过本文和angularjs没多大关系。在学习使用route和ng-view使用模版之后,发现view装载之后,firefox都会报个错误“废弃 document 元素之后的内容”,虽然页面正常运行,不过总是看着别扭:(。

  仔细查看后,发现报错之处指向了样式表标签style的结束处,这才反应过来:原来是完整html页面,样式表在head标签之中没有问题,可是现在这些各个view模版自己使用的一些样式就直接写到了模版中,因此不在整个页面的Head之中,html协议是不支持的!虽然这些style都是很简单的,局部功能专用的,但是以前如果想要解决此问题,都只能是建立一个app的整个style文件,使用class的方式解决,需要起个每个功能的样式专用的名字,再给每个元素引用,可是这样一来不但麻烦,而且麻烦!因为不能给元素写通用的样式了!很不甘心,就去W3School,仔细研究了一下html5的文档,发现HTML5已经支持局部的样式表了^_^。不过有两点要求,第一需要放在一个父元素之内,第二添加属性scoped。改造好的模版如下:

<div id="view-xxx">
    <style scoped="scoped">
        A{}
        thead tr{}
        tbody tr{}
    </style>
    ...
</div><!-- end of view -->

  重新载入看看,完美解决!

时间: 2024-11-07 03:11:39

解决错误:“废弃 document 元素之后的内容”——HTML5新特性,局部样式表的相关文章

html5新特性-header,nav,footer,aside,article,section等各元素的详解

Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性.级块性元素.行内语义性元素和交互性元素四大类. 下面是对各标签的详解,section.header.footer.nav.article.aside.figure.code.dialog.meter.time.progress.video.audio.details.atagrid.menu.command的 介绍 结构性元素主要负责web上下文结构的定义 <section>:在 we

HTML5新特性:元素的classList属性与应用

在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理,如下, 下面的代码你未必能看得懂运行流程,但应该能看懂功能部分,这几段函数是取自我录制的一套视频中,讲解DOM框架封装的一部分 gQuery.prototype.hasClass = function (ob

10个html5增加的重要新特性和内容

文章开篇之前我们先了解一下什么是html5,百度上是这样定义html5的:万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 其实说白了html5也就是人为定义的一些规则和新的api的集合.下面我就介绍一些开发常用的html5新特性: 一:canvas标签 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">your browser does no

微软BI 之SSIS 系列 - XML Task 中XSLT 样式表转换错误记录

开篇介绍 此文章专门记录 XSLT 样式表转换过程中的语法问题 错误一 值与属性的倒置 修改了几次样式表,但还是一如既往的报错,报错信息如下: [XML Task] Error: An error occurred with the following error message: "Attribute and namespace nodes cannot be added to the parent element after a text, comment, pi, or sub-eleme

html5新标签及废弃元素

html5新标签 <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 描述 <audio> 定义音频内容 <video> 定义视频(video 或者 movie) <source> 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件. <track>

As.net WebAPI CORS, 开启跨源访问,解决错误No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource

默认情况下ajax请求是有同源策略,限制了不同域请求的响应. 例子:http://localhost:23160/HtmlPage.html 请求不同源API http://localhost:22852/api/values, What is "Same Origin"? Two URLs have the same origin if they have identical schemes, hosts, and ports. (RFC 6454) These two URLs h

解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

在IE6,IE7下,子元素使用position:relative.父元素使用overflow:auto后,我们预期的是滚动条滚动时,子元素也随着滚动,实际情况是内容不滚动,就感觉你是定位定在那里了. 解决办法是父元素添加position:relative样式

JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

错误:“ResourceDictionary”根元素需要 x:Class 特性来支持 XAML 文件中的事件处理程序。请移除 MouseLeftButtonDown 事件的事件处理程序.

原文:错误:"ResourceDictionary"根元素需要 x:Class 特性来支持 XAML 文件中的事件处理程序.请移除 MouseLeftButtonDown 事件的事件处理程序. 转载于(https://social.msdn.microsoft.com/Forums/windowsapps/zh-CN/af3161ce-f020-4b0b-9b84-95ae597e53fd/resourcedictionary-xclass-xaml-mouseleftbuttondo