今天在调一个应用的模板的时候，发现了在 IE 浏览器下，如果我们将图片包含到 label 内，那么，点击图片将无法触发控件，从而导致焦点不能转到相应的表单控件上。
首先简要的说下 label 标签，它的主要作用是向控件定义标注（标记）。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。label 标签有一个可选属性 – for，它用来定义 label 针对哪个表单元素，设置为某个表单元素的 id。另外，如果此属性未被规定，那么 label 会关联其内容。
先看一个简单的例子：
<!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>无标题文档</title>
</head>
<body>
<ul>
<li><input id="r1" name="r1" type="radio" /><label for="r1">点此选中radio</label></li>
<li><input id="r2" name="r1" type="radio" /><label for="r2">点此选中radio</label></li>
<li><input id="r3" name="r1" type="radio" /><label for="r3">点此选中radio</label></li>
</ul>
</body>
</html>
现在我们将文字改为图片：
<!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>无标题文档</title>
</head>
<body>
<ul>
<li><input id="r1" name="r1" type="radio" /><label for="r1"><img src="http://www.csser.name/images/logo.gif" /></label></li>
<li><input id="r2" name="r1" type="radio" /><label for="r2"><img src="http://www.csser.name/images/logo.gif" /></label></li>
<li><input id="r3" name="r1" type="radio" /><label for="r3"><img src="http://www.csser.name/images/logo.gif" /></label></li>
</ul>
</body>
</html>
大家可以将这段代码在各浏览器中测试，Firefox、Opera、Safari、Google Chrome 都能正常触发控件，在 IE 6、IE 7、IE 8 Beta2 版本均不能正常触发控件。
这个功能是非常好用的，可以有效的提高网站的用户体验，我们不能丢弃这个功能，所以要借助与 JS 来完成我们的目标。
继续阅读 »
昨天在给自己网站做一个效果的时候发现的一个问题，不知道算不算是 IE 的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>赋值运算符“=”</title>
</head>
<body>
<div style="width:100%; height:600px;">测试页面</div>
</body>
</html>
<script>
var bodys = document.getElementsByTagName("body");
var cur_num = Math.floor(34*Math.random());
var cur_style = "url(http://www.jolintown.com/site/cursor/cur/" + cur_num + ".cur)";
alert(cur_style);
bodys[0].style.cursor = cur_style;
</script>
如我们所想，得到的结果应该是一个正常的结果，可以在这里看到演示。
继续阅读 »
首先，我们先看一下例子：
HTML 代码：
<pre>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function tagCloud() {
if(document.getElementById("tags_cloud")) {
var tags = document.getElementById("tags_cloud");
var tagLinks = tags.getElementsByTagName("a");
var styles = new Array();
styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
for(var i=0; i<tagLinks.length; i++) {
tagLinks[i].style.color = styles[0][Math.floor(styles[0].lengthMath.random())]; //设定字体的颜色
tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].lengthMath.random())]; //设定字体的大小
tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
}
}
}
addLoadEvent(tagCloud);</pre>
CSS 代码：
pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px; height:400px;}
这里，pre 的宽度和高度固定，所有浏览器的宽度和高度表现是统一的，滚动条内含在宽度和高度里边，带上滚动条和边框，我们所看到的宽度和高度都是 412px。可以在这里看到这一个版本的表现。
继续阅读 »