`
lovecontry
  • 浏览: 1033739 次
文章分类
社区版块
存档分类
最新评论

[经验总结]XSLT输出的HTML空元素导致jQurey解析出错

 
阅读更多
<!-- /*<! [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; } /*]]-->

*/ -->

Author: Thinkhy
Date: 2010.04.11.
Url: http://www.disandu.com/?p=714
Keyword: HTML空元素 DIV XSLT jQuery

今天有个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。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics