前天在给豆豆调试东西的时候碰到的一个问题。在之前的一篇日志–“同一行中的左右两侧文字该怎么定位”里，我提到过一种方法，现在再来回顾下：
<!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>
<style>
h2 { background:#FFECC8; font-size:12px;}
h2 span { float:right;}
</style>
</head>
<body>
<h2><span>我在右边</span> 我在左边</h2>
</body>
</html>
这样子可以实现如下图所示的效果：
这时，我们给 h2 添加一个 CSS 属性：text-indent，看看会发生什么情况：
h2 { background:#FFECC8; font-size:12px; text-indent:2em;}
首先看下 IE 7 下的显示：
继续阅读 »
首先，我们先看一下例子：
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。可以在这里看到这一个版本的表现。
继续阅读 »