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

当在 div 标签内无任何内容时：
<div></div>
如果给 div 元素设置了宽度时，比如 width:100% ，此时 div 在 IE 中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：
<div style=”width:100%”></div>
此时在 IE 中到底是什么在影响着最终的显示，又是如何解析的呢？
可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）
我们对上面的代码逐一添加过滤属性（具体的过程有兴趣的朋友，可以私下里实验一下，“自己动手，丰衣足食”！）
在测试的过程中，你会发现 IE6 和 IE7 的解析也不尽相同，比如在给 div 设置了 line-height:0; height:0; 的样式后，IE7 中显示正常了，不再占据物理空间了，而IE6 却依然我行我... 4 条评论 »

div.container {
border: 1px solid #000000;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
层套关系：container 的 div 包含 left 和 right
最简单的清除浮动的方法：
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
兼容情况：IE6 IE7 FF MacIE 等
来源地址：http://www.quirksmode.org/css/clearing.html

对于相同的结构，我们可以通过CSS来创造出40种不同的布局，可以从中学到布局的很多知识，也可以体验出CSS的强大和标准的便捷。
http://blog.html.it/layoutgala/

The Web is an application built on top of the Internet

原文地址：《The W3C Technology Stack》
翻译地址：《w3c技术架构介绍》
一种发展，一种趋势，一份把握，一份机遇！

IE中z-index BUG
首先先来看一个演示例子的代码部分。
XHTML 部分：
<div id=”container”>
<div id=”box1″>这个box应该在上面</div>
</div>
<div id=”box2″>这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
CSS 部分：
#container {
position: relative;
}
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: 20;
}
#box2 {
position: absolute;
top: 50px;
left: 160px;
width: 200px;
height: 200px;
background-color: green;
z-index: 10;
}
两个 box 被完全的定位，背景色为黄色的 box1 拥有 z-index 属性值 20，而背景色为绿色的 box2 拥... 4 条评论 »

z-index 属性简介
z-index : auto | number
auto: 默认值。
number: 无单位的整数值，可为负数 。
z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
注意：这个属性不会作用于窗口控件，如 select 对象。在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。
z-index 属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z 轴）上的层叠顺序（stack order）。
每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 a... 3 条评论 »

最近几天在学习、练习、研究 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 中还有一个更简单更方便的方法，就是用属性模板... 4 条评论 »

表格的 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），也就是说我们搞懂了置换元素的含义，... 10 条评论 »