我才12岁 ?

2008年10月 存档

IE浏览器下的label局限性 at 2008.10.29 20:08

今天在调一个应用的模板的时候，发现了在 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 来完成我们的目标。

继续阅读 »

颜色的RGB转HSV以及HSV转RGB的JavaScript方法 at 2008.10.12 10:10

最近在为 Discuz! 后台的界面风格制作自动生成配色的脚本，原理是根据用户输入的一种颜色值，生成很多种颜色，然后将这些颜色自动添加到相应的设置中去。自己在配色的时候往往通过 Photoshop 或者 Fireworks 等工具调整颜色，依据基本上是根据 HSV 来调整，所以这次配色也会先将颜色值转化为 HSV，而后再设置 HSV 来生成各种需要的配色。其实关键还是 RGB 与 HSV 的相互转化，以前并不熟悉二者的转化关系，百度、Google 了很多也没找到完整的 JavaScript 转化算法，参考了很多个算法、程序，经过几天的研究得到了比较完整的算法，虽然这个需求并不是很多，但是我还是希望和大家一起分享，如有不当之处，欢迎指正哈。

继续阅读 »

IE6、IE7 下的浮动bug at 2008.10.4 12:12

开门见山，我们首先看一下代码：

<!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>



test { background:#0099FF; overflow:hidden; padding:5px; width:300px;}



.testblock { float:left; height:100px; width:100px; background:#000; margin-right:20px; margin-bottom:100px;}
</style>
</head>
<body>
<div id="test">
    <div class="testblock"></div>
    <div class="testblock"></div>
</div>
</body>
</html>

大家在心中勾画一下应该是什么结果呢？看一下在 IE6、IE7 下的显示把：

.testblock 的左 margin 起效，而下 margin 未起效，再来看看该段代码在 IE8、Firefox、Opera、Safari 以及 Google Chrome 下的显示：

两个 margin 都起效了，您可以通过各种浏览器打开这个页面查看效果。IE6、IE7 的下 margin 真的没有起效吗？我们再为 #test 添加两个内 div，看看会是什么效果：

继续阅读 »

这位姐姐，你好，你的浏览器版本太低了，为了避免您中毒，请您升级您的浏览器！