分类“HTML/CSS/XML/XSL”所有日志

最近几天在学习、练习、研究 XML 和 XSL ，今天在练习的时候碰到如何将 XML 中的 CDATA 注释部分内容按照 HTML 的格式输出，下面提供两种方法（其实是两种浏览器中的方法）：
1、使用disable-output-escaping=”yes”，不过FF不支持。
2、使用脚本可以实现 Firefox 下的显示）。
// JavaScript Document by aoao
var escaping=function(){
if(!document.getElementById){ return false;}
var interim;
var temp = document.getElementsByTagName(”DIV”);
var tempLen = temp.length;
var pattern = new RegExp(”(^|\\s)description(\\s|$)”);
for (i = 0; i < tempLen; i++) {
if ( pattern.test(temp[i].className) ) {
interim = temp[i].textContent;
if(interim == undefined || (interim.indexOf(”&”) == -1 && interim.indexOf(”<”) == -1)){/*_*/}
else{temp[i].innerHTML [.... 0 条评论»

XML中
<home>http://www.planabc.net</home>
如果我们在 XSL 中要调用 home节点的值作为 a 标签的 href 属性值，该如何应对呢？
我们可以通过给 a 标签添加一个属性，具体语法：
<xsl:attribute name=”href”>http://www.planabc.net</xsl:attribute>
name 属性表示要添加属性的名字，标记包含的内容为要添加属性的值。
根据上面的介绍我们在 XSL 中可以写成这样：
<xsl:element name=”a”>
<xsl:attribute name=”href”><xsl:value-of select=”home” /></xsl:attribute>
Index
</xsl:element>

或者：
<a title=”">
<xsl:attribute name=”href”><xsl:value-of select=”home” /></xsl:attribute>
Index
</a>

在 XSL 中还有一个更简单更方便的方法，就是用属性模板... 2 条评论 »

表格的 cellspacing 和 cellpadding 我们经常会用如下的方式来清除默认样式：
<table cellspacing=”0″ cellpadding=”0″></table>
很多朋友会说表现在结构中，这样不符合标准，那如何将这个表现拿出来，有些朋友或许很迷惑。我们可以用 table 的 border-collapse: collapse; 属性 来代替cellspacing=”0″，用 th,td 的 padding: 0; 属性来代替 cellpadding=”0″。
table {
border-collapse:collapse;
border-spacing:0;
}
th,td {
padding: 0;
}

还可以用 expression 来实现 cellpadding=”0″ 的样式：
table {
border-collapse:collapse;
border-spacing:0;
padd:expression(this.cellPadding=0);
}

下面我们看下《HTML与CSS入门经典（第7版）》一书中对这两个属性的描述：
对表格的设置不仅可以使用style属性。例如，可... 1 条评论 »

margin 在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。
一、margin的基本特性
margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用来设置 box 的 margin area。属性 margin 可以用来同时设置 box 的四边外边距，而其他的 margin 属性只能设置其自各的外边距。
margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。
或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，... 6 条评论 »

在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。
display:inline-block
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
但对于这个属性不是所有浏览器都识别。
支持的浏览器有：Opera、Safari。
但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（在 Firefox3 版本中将会支持 display:inline-block）。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，text-align 有时候就会有问题，还得改用 Firefox 的私有属性 -moz-box-align 来解决（谢谢 aoao 提供案例... 4 条评论 »

表达方式：+property:value
测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2
测试结果：IE5，IE6 ，IE7浏览器识别；FF2.0，Opera 9，Safari 2浏览器不识别。
结论：我们可以用”+”来实现只有 IE 识别的 CSS Hack。
比如我们要实现在 IE 中 480px 的宽度，而在其他浏览器 500px 的宽度，就可以通过 “+” Hack 来完成，如下：
#hack {
width:500px;
+width:480px; /*only IE*/
}
这应该归结于IE对一些特殊字符的识别，大家还可以测试其他的特殊字符如：” >”,”-”,”@”……或许有更多的收获。
PS：可能有朋友想到 “_” Hack ，但它们是由区别的，因为IE7中是不识别“_”的。
扩展阅读：《Internet Explorer 7 CSS hacks》

有朋友问：不明白为什么有了 DOCTYPE 还要 namespace，他俩不是一个作用么？
其实不然，先让我们看看网上对它们的定义：
什么是 DOCTYPE？
DOCTYPE 是 document type (文档类型)的简写，用来说明你用的 XHTML 或者 HTML 是什么版本。其中的 DTD 叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的 DTD 来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE 声明是必不可少的关键组成部分；除非你的 XHTML 确定了一个正确的 DOCTYPE，否则你的标识和 CSS 都不会生效。
什么是namespace？
由于 XML 允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML 采用名字空间声明，允许你通过一个网址指向来识别... 0 条评论»

裁切 BUG（Guillotine Bug）现象：浮动元素内某些连接 hover 时，该元素的底部会被砍掉。
详细介绍：http://www.positioniseverything.net/explorer/guillotine.html
触发条件：

一个容器元素；
在容器内有一个没有被清楚浮动的浮动元素；
非浮动的内容在浮动元素之后，并且容器内包含链接；
那些链接的a:hover样式改变某些属性；
只出现在IE浏览器。

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。
或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：
在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。
在 CSS2 中此伪类可以应用于任何对象。
但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。
当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
我们先用 CSS2 的写法来实现：
XHTML部分：
<... 6 条评论 »

学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。
在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点无法点击，而且在IE下，只能点击文字部分大小，不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击，并且不允许有盲点存在。
那我们又该如何去实现呢？下面我们一起来探讨一些解决方法：
首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来：
XHTML部分：
<div id=”header”>
<ul>
<li><a href=”#”>Home</a></li>
<li id=&#... 2 条评论 »