XHTML1.1 Tags List
http://ore.to/htmllint/tagslist.cgi?HTMLVersion=XHTML11
... 2 条评论 »Firefox 下 innerHTML 的一个 BUG
今天同事 明城 在项目中碰到一个 BUG，代码具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Firefox下innerHTML的一个BUG</title>
<style type="text/css">
a { display: block; border: 1px solid red;}
div { display: inline; border: 1px solid red;}
</style>
</head>
<body>
<a href="javascript:change();">change<div id="count">20</div>aaa</a>
<script type="text/javascript">
function change() {
var count = document.getElementById(’count’);
var [...]
Firebug Lite
Firebug Lite 源自 Firebug ，可使用在IE、Opera、Safari 浏览器上。最新版本为 Firebug Lite 1.2 ，不仅包含了旧版本的console.log 命令，还可查看 DOM 元素、跟踪 XHRs，操纵 HTML、 CSS 和 JavaScript 。
Firebug Lite 可以在页面中插入调试：
<script type=’text/javascript’ src=’http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’></script>
还可以创建 Firebug Lite 书签调试（推荐）：
javascript:var firebug=document.createElement(’script’);firebug.setAttribute(’src’,'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’);document.body.appendChild(firebug);(function(){if(window.pi&&window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
当然你也可以将文件下载到本地调试。
更多介绍请看：http://getfirebug.com/lite.html
line-height 属性的继承问题
淘宝商城的 detail 页面“产品详情”部分是商家自定义区块，曾出现这样一个问题：
<style type=”text/css”>
p {
line-height:17px;
}
</style>
<div class="mdse-detail">
<p>
<strong style="font-size:30px">
品牌：XZX<br />
市场价：145元<br />
[...]
如何给 legend 标签设定宽度
我们在做表单的时候经常会使用到这样的结构：
<fieldset>
<legend>哪些浏览器legend标签设定的宽度有效</legend>
<input type=”checkbox” value=”ie6″ name=”width” id=”ie6″ checked=”checked” /><label for=”ie6″>IE6</label>
<input type=”checkbox” value=”ie7″ name=”width” id=”ie7″checked=”checked” /><label for=”firefox”>IE7</label>
<input type=”checkbox” value=”firefox2″ name=”width” id=”firefox2″ /><label for=”firefox2″>Firefox2</label>
<input type=”checkbox” value=”firefox3″ name=”width” id=”firefox3″ /><label for=”firefox3″>Firefox3</label>
<... 11 条评论 »
iphone 浏览器缓存的几个注意点
正确设置 expires 或 cache-control 头才可缓存组件；
遵循“最少最近使用（least recently used (LRU)）原则；
单个组件最大限制为 25KB，当大于 25KB，则不会被缓存；
最多可能缓存 19 个 25KB 的组件，缓存总限制为 475KB-500KB。
gzipped 压缩对缓存文件不起作用，先解码后缓存。
重启后缓存不会被保留。
详细阅读：《Performance Research, Part 5: iPhone Cacheability – Making it Stick》（需要用代理才可以看到）
... 5 条评论 »如何跨浏览器使用连续字符的换行
由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。
那如何解决这个问题呢？
在 IE 和 Safari 1.3+ 下相对比较容易解决，使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号。
注：word-break 主要使用在 CJK 文本，即：中文（Chinese）、日文（Japanese）、韩文（Korean）。
而 Firefox 和 Opera 浏览器，无法识别 word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203 的字符（该字符在非 IE 浏览下不占据空间），使连续变为了不连续，达到了换行的效果。
breakWord = function(dEl){
var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
var node,s,c... 13 条评论 »
解决 IE6 内存泄露的另类方法
Hedger Wang 在国内 blog 上得到的方法：使用 try … finally 结构来使对象最终为 null ，以阻止内存泄露。
其中举了个例子：
function createButton() {
var obj = document.createElement(”button”);
obj.innerHTML = “click me”;
obj.onclick = function() {
//handle onclick
}
obj.onmouseover = function() {
[...]
：
witter：