一个多月来的新淘江湖项目中，遇到了各种各样奇怪的东东，在这里记录一下哈~
首先是编辑器问题。。。被有脚鄙视了无数次了。。。囧~
1.text-indent与inline-block元素：
- 场景：
- 当text-indent使用在inline-block元素上时
- 问题：
- 在ie6下，将出现元素跟随text-indent左移的问题，其它浏览器正常。
- 解决方法：
- 不使用text-indent，改用font-size:0和line-height:200px。当此元素position:absolute时，表现正常。
如图：
Demo:点击查看
2.legend：
legend是一个十分怪异的东东，我一般很少很少去触及它，因为它真的很难搞，这次一不小心发了善心，结果它给我带来了各种各样的奇怪问题。
legend是fieldset元素的定义标题，fieldset可将表单内的相关元素进行分组，当然是用fieldset可实现一些特殊的效果，但是各浏览器对legend的呈现不一，给我们的使用带来了诸多麻烦。
1)legend的重置：legend需要重置margin、padding、color，但是IE6、IE7下的legend的margin-left需要设置为-7才能和其它浏览器呈现统一。
2)看图，legend和fieldset的位置，忘记了曾经遇到什么问题了。。。反正就是这个东西闹的。。。
3)IE下legend死活不换行，Opera、Chrome、Safari下会自动换行，Firefox下需要给legend定义white-space:normal来搞定。
4)给legend加postion:relative后，Opera下会没入fieldset中，跟IE下相同，但是legend的换行依然有效。
Demo地址：点击查看
3.IE不支持url中文的自动转码~
4.需要小心type=”submit”的按钮：
如果需要为其注册submit事件，最好注册到form上，倘若在按钮上定义click事件，那么在用户使用enter时会出现问题。
5.IE7 的hover：
IE7 是支持hover伪类的，但是不管是用伪类，还是用js的mouseenter，它都会有一个问题，就是你必须将鼠标放到一个有东东的地方才会触发，也就是说，当你经过空白的时候是不会触发hover的，但是经过visibility:hidden的东东上时可以触发。解决的方法是给盒子加一个背景~此问题仅在ie7下有，很是怪异！
继续阅读 »
今天做页面发现一个问题，貌似之前也遇到过，在此记录一下哈~
label里边如果有div（或者类似的块状元素）的话，那么点击div不会让input框选中，label也就失去了其作用。但是，如果是内联元素的话，在样式里给其定义成块状元素，则不会出现这种情况，点击的时候会正常的选中input框。
HTML：
<label for="jolin"><div>111111111111111111</div><input type="radio" id="jolin" name="test" /></label>
<label for="jolin2"><span style="display:block;">111111111111111111</span><input type="radio" id="jolin2" name="test" /></label>
DEMO：http://12sui.com/test/label_090531.html
在其它常见浏览器下未发现问题！~
继续阅读 »
今天在调一个应用的模板的时候，发现了在 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 来完成我们的目标。
继续阅读 »