<!--
/*<! [CDATA[*/
body { color: #000; background-color: #fff; margin: 0px 10%; min-width: 720px; font-family: Verdana, sans-serif;
counter-reset: chapter section subsection subsubsection paragraph lchapter lsection lsubsection lsubsubsection lparagraph}
div.footnote { border-left: 1px solid #000; margin-left: 0em; clear: both }
div.ftext { position: relative; margin-left: 50px }
div.fnumber { float: left; width: 40px; padding: 0em; margin-left: 0.5em; margin-top: 0em }
div.fnumber a { margin: 0px; padding: 0px }
div.ctext { position: relative; margin-left: 100px }
div.cnumber { float: left; width: 90px; padding: 0em; margin-left: 0.5em; margin-top: 0em }
div.cnumber a { margin: 0px; padding: 0px }
div.tip { border: 2px solid #0d0; margin: 0.5em 2em 1em 2em; padding: 0em 1em }
div.warning, div.caution, div.danger, div.error { border: 2px solid #f00; margin: 0.5em 2em 1em 2em; padding: 0em 1em }
div.note, div.hint, div.important { border: 2px solid #000; margin: 0.5em 2em 1em 2em; padding: 0em 1em }
div.figure { display: block; padding: 1em; width: 400px; clear: both}
div.topic { margin: 2em }
div.vstsidebar, div.sidebar { border: 2px solid #aaa; color: #000; background-color: #ffffee; float: right; width: 40%; margin-left: 1em; margin-right: -1em; padding: 1em }
span.strike { text-decoration: line-through }
span.big { font-size: large }
span.small { font-size: small }
span.title { font-style: italic }
span.notetitle { font-size: large; font-weight: 900; font-family: Verdana, sans-serif }
p.toc { font-size: large; font-weight: 900 }
p.notesubtitle { font-weight: 900; font-family: Verdana, sans-serif }
p.attribution { font-style: italic; margin-left: 8em; text-indent: -1.4em }
.vstright { float: right; margin: 1em }
.vstleft { float: left; margin: 1em }
.vstcenter { margin: 1em auto }
blockquote.pull { font-size: large }
p.rubric { font-size: large; margin-left: 2em }
dd.normal { margin-bottom: 0.5em }
dt.option { float: left; margin: 0em 0em 5px 2em; padding: 0px; font-family: monospace }
dd.option { padding: 0px; margin: 0em 0em 5px 10em; text-indent: 0.5em }
dd.option > p { margin: 0px }
dd.normal > p { margin: 0px }
table { border-collapse: collapse; margin: 0.5em 0em }
thead, tfoot { text-align: center; font-weight: bold }
td { border: 1px solid #000; padding: 0.25em; _top: 0%; vertical-align: top }
td blockquote p{ margin: 0px; padding: 0px}
td blockquote { margin: 0px; padding: 0px}
table.vstbless td { border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top }
td > p { margin: 0px }
table.field { border: 0px solid #000; margin-left: 2em; padding: 0.25em; _top: 0%; vertical-align: top }
td.fkey { font-weight: 900 }
td.fval { border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top }
td.fkey { font-weight: 900; border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top }
td.fdkey { text-align: center; font-weight: 900 }
td.fdval { text-align: center; font-style: italic }
td.fakey { text-align: center; font-weight: 900 }
td.faval { border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top }
hr { width: 100%; margin: 1.5em auto }
h1 { text-align: center; clear: both }
h2, h3, h4, h5, h6 { text-align: left; margin-top: 1em; clear: both }
h2 { counter-reset: section subsection subsubsection paragraph }
h3 { counter-reset: subsection subsubsection paragraph }
h4 { counter-reset: subsubsection paragraph }
h5 { counter-reset: paragraph }
h1 a { color: #000; background-color: transparent }
h2 a { color: #000; background-color: transparent }
h3 a { color: #000; background-color: transparent }
h4 a { color: #000; background-color: transparent }
h5 a { color: #000; background-color: transparent }
h6 a { color: #000; background-color: transparent }
p.subh1 { text-align: center; font-size: 120%; font-variant: small-caps }
p.subh2, p.subh3, p.subh4, p.subh5, p.subh6 { text-align: left; font-size: 120%; font-variant: small-caps }
h2:before { content: counter(chapter)" "; counter-increment: chapter }
h3:before { content: counter(chapter)"."counter(section)" "; counter-increment: section }
h4:before { content: counter(chapter)"."counter(section)"."counter(subsection)" "; counter-increment: subsection }
h5:before { content: counter(chapter)"."counter(section)"."counter(subsection)"."counter(subsubsection)" "; counter-increment: subsubsection }
h6:before { content: counter(chapter)"."counter(section)"."counter(subsection)"."counter(subsubsection)"."counter(paragraph)" "; counter-increment: paragraph}
li.h1 { margin-left: 0em }
li.h2 { margin-left: 1em; counter-reset: lsection lsubsection lsubsubsection lparagraph }
li.h3 { margin-left: 2em; counter-reset: lsubsection lsubsubsection lparagraph }
li.h4 { margin-left: 3em; counter-reset: lsubsubsection lparagraph }
li.h5 { margin-left: 4em; counter-reset: lparagraph }
li.h2:before { content: counter(lchapter)" "; counter-increment: lchapter }
li.h3:before { content: counter(lchapter)"."counter(lsection)" "; counter-increment: lsection }
li.h4:before { content: counter(lchapter)"."counter(lsection)"."counter(lsubsection)" "; counter-increment: lsubsection }
li.h5:before { content: counter(lchapter)"."counter(lsection)"."counter(lsubsection)"."counter(lsubsubsection)" "; counter-increment: lsubsubsection }
li.h6:before { content: counter(lchapter)"."counter(lsection)"."counter(lsubsection)"."counter(lsubsubsection)"."counter(lparagraph)" "; counter-increment: lparagraph}
li.h6 { margin-left: 5em }
ol, ul { margin-bottom: 0.5em; margin-top: 0.5em }
ol.loweralpha { list-style-type: lower-alpha }
ol.upperalpha { list-style-type: upper-alpha }
ol.lowerroman { list-style-type: lower-roman }
ol.upperroman { list-style-type: upper-roman }
ol.decimal { list-style-type: decimal }
ul.square { list-style-type: square }
ul.circle { list-style-type: circle }
ul.disc { list-style-type: disc }
li > p { margin: 0em }
img { border: 1px solid #000; padding: 0em; display: block; margin: 1em auto }
img.inline { border: 1px solid #000; padding: 0em; margin: 0em; display: inline }
pre { color: #000; background-color: #eee; margin-left: 2em; clear: both; overflow: auto }
div.unknown { font-family: monospace; color: #000; background-color: #fff; margin: 1em; padding: 1em; clear: both; border: 3px solid red}
pre.quoted { color: #000; background-color: #eee; margin-left: 0em; clear: both; overflow: auto }
pre.rawlatex { color: #000; background-color: #ddd; border: 1px solid #000; padding: 0.1em; clear: both; overflow: auto }
pre.address { font-family: Verdana, sans-serif; display: inline; margin: 0px; color: #000; background-color: #fff; overflow: auto }
span.target { text-decoration: underline }
div.vstfooter hr { width: 100%; margin: 0px }
div.vstfooter p { margin: 0px }
/*]]>*/
-->
<!--
/*<! [CDATA[*/
.tohtml-html evening { color: #ffffff; background-color: #808080; font-family: monospace; }
.tohtml-html evening .Error { color: #ffffff; background-color: #ff6060; font-weight: bold; }
.tohtml-html evening .Identifier { color: #00ffff; font-weight: bold; }
.tohtml-html evening .Statement { color: #ffff00; font-weight: bold; }
.tohtml-html evening .Type { color: #00ff00; font-weight: bold; }
.tohtml-html evening .Constant { color: #ff40ff; font-weight: bold; }
.tohtml-javascript evening { color: #ffffff; background-color: #808080; font-family: monospace; }
.tohtml-javascript evening .Constant { color: #ff40ff; font-weight: bold; }
.tohtml-javascript evening .Identifier { color: #00ffff; font-weight: bold; }
.tohtml-javascript evening .Statement { color: #ffff00; font-weight: bold; }
/*]]-->
*/
-->
今天有个HTML空元素的问题折腾了我两个小时,问题是这样的,我要处理一段描述结构化文本的HTML片断:
<div class='paper'>
<div class='question'>
<divclass="subject">To be or not to be, it's aquestion?</div>
<divclass="choice">A</div>
<divclass="choice">B</div>
<divclass="choice">C</div>
<divclass="choice">D</div>
<divclass="aside"/>
</div>
<div class="question" >
<divclass="subject">Who am I?</div>
<divclass="choice">A</div>
<divclass="choice">B</div>
<divclass="choice">C</div>
<divclass="choice">D</div>
<divclass="aside"/>
</div>
</div>
需要取到每一个class名为question的div,逐个进行处理。首先还是用的jQuery方法取:
$("div.question").each(function(){
alert($(this).html());
do-something-here ....
}
);
在each方法中将每个元素的html文档取出来,发现div的html内容取得不对,比如取第一个div.question时将之后所有的quesion内容就包括了。于是,我开始逐行删除,缩小出错范围,最后的问题是出在这一行:<div class="aside" />。这时,我隐约记得,HTML标记对空元素的表示不同于XML,有时候就必须要有结束标签。果真是这样,为这行空div加上</div>结束符标签,世界又美好如常了。
从开发者的角度,需要更深入的了解出错原因。仔细一想,这个问题的来源是XSLT模板。上面的HTML内容是经过XSLT模板转换得到的,而在XSLT里output元素的method属性被设置为"xml",这样导致空元素被简写为"<element/>"的形式。让我们再读一段W3C的标准文档(http://www.w3.org/TR/xslt#section-XML-Output-Method):
The html output method should not output an end-tag for empty elements. For HTML 4.0, the empty elements are area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta and param. For example, an element written as <br/> or <br></br> in the stylesheet should be output as <br>.
从上面的标准文档中可以推测,浏览器可能将<div/>处理成<div>,这就会导致上面出现的错误。
问题到这里应该算彻底解决了,但IE却又带来了难题,将XSLT中output method设置为html后,图片不能显示了,原因是图片路径中有汉字,出现了编码不识别的问题,换了好几个中文编码都没成功。最后只得在空div中加了个空格,强制div元素非空。
今天的经历告诉我们,要勤读标准文档,不要相信MS。
分享到:
相关推荐
本资料含有以下内容:xml基础 dtd约束模式 schema约束模式 xslt样式 sax解析 dom解析 jom解析
XSLT 元素使用说明
编写book.xslt文档,要求在book.xml中打印出所有的section元素(包括属性)及其title子元素(并且保持section元素之间的嵌套关系);输出结果如下:
XSLT元素使用说明
xml加xslt转化成html的源代码!超有用的
xslt元素使用说明
NULL 博文链接:https://rabbit.iteye.com/blog/309936
使用XSLT将XML文档转换成HTML文档.
xslt_xml_html 测试xslt_xml_html 测试xslt_xml_html 测试xslt_xml_html 测试
Javascript+Xslt解析Xml为Html的方法.pdf
使用xslt讲xml文件转换成html和js的形式,根据js处理不同的xml文件
1)xslt控制xml样式 2)xml、xslt被html调用 3)xml、xslt被c#后台调用
Javascript+Xslt解析Xml为Html的方法[参照].pdf
XSLT XML 数据结合并显示 双击XML浏览效果
XSLT 元素 XSLT在服务器上 XSLT在客户端
DIXml is an embedded XML, XSLT, and EXSLT processing library for Delphi (Embarcadero / CodeGear / Borland). It is build on the libxml2, libxslt and libexslt libraries but requires no DLLs nor other ...
NULL 博文链接:https://abcccccc.iteye.com/blog/1013081
XSLT 元素参考手册 APPLY-IMPORTS; applytemplates;calltemplate
xslt手册.chm java实现xslt 简单的 Xalan 扩展函数 - 工程 xslt知识点速查手册.doc 2 Javascript XSLT 处理XML文件(IE and Firefox).doc Saxon 剖析 XSLT 处理器.doc
Learning XSLT moves smoothly from the simple to complex, illustrating all aspects of XSLT 1.0 through step-by-step examples that you'll practice as you work through the book. Thorough in its coverage ...