昨天遇到的一个问题，虽然是自身的不合理，但是还是记录一下。
当table中有一个空的tbody元素，并且table中同时有thead的时候，会造成table边框在Firefox下失效的问题，如图所示：
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>空tbody在firefox下的问题</title>
<style type="text/css">
table, td, th {
border:1px solid green;
border-collapse:collapse;
}
td, th {
padding:10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>cecilia</th>
<th>jolin</th>
</tr>
</thead>
<tbody>
</tbody>
<tbody>
<tr>
<td>张柏芝</td>
<td>蔡依林</td>
</tr>
</tbody>
</table>
</body>
</html>
有些地方说tbody必须包含tr，有些地方说可以包含0个tr，在进行html验证的时候又会提示说标签缺少child。这个问题只有在Firefox下出现，而且必须有thead存在的时候才会出现这个问题。希望哪位高人指点一下问题产生的原因~
Demo地址：http://www.12sui.cn/test/empty-tbody.html
测试浏览器：IE6、IE7、IE8、Opera 10.10(Build 1893)、Firefox 3.5.6、Chrome 3.0.195.38、Safari 4.0.3(531.9.1)。
参考资料：
昨天遇到的一个bug，开发将一个自定义属性中的一个字母写成了大写，结果造成ie浏览器下的判断失效，这里记录一下，并在其它浏览器下作了测试。
Test Code:
<div id="test" data-Maxvalue="1" style="width:300px; height:200px; border:2px solid green; margin:50px auto; padding:20px">
此div设置自定义属性data-Maxvalue值为1.
</div>
<script type="text/javascript">
var el = document.getElementById('test');
alert(el.getAttribute('data-maxvalue'));
el.setAttribute('data-maxvalue','2');
alert(el.getAttribute('data-maxvalue'));
alert(el.getAttribute('data-Maxvalue'));
el.setAttribute('data-maxValue','2');
alert(el.getAttribute('data-maxValue'));
el.setAttribute('data-Maxvalue','2');
alert(el.getAttribute('data-maxValue'));
</script>
如果设置一个自定义属性data-Maxvalue，那么除ie外的所有浏览器都会忽略大小写而统一解析为data-maxvalue，可以用各自的developer tool查看下，而且在读取的时候也会忽略大小写，都不会造成读值、设值的问题，但是在ie浏览器下，显得非常的复杂。
在使用getAttribute读值的时候，ie会把里边的值忽略大小写，而去匹配html里的属性值，然后返回，使用setAttribute去设置的时候，ie同样会忽略大小写而去正确的设置html里的属性值，但是这个值你读不到，当你再去使用getAttribute去获取的时候，读到的依然是最初默认的值。只有你正确的书写attribute的值，并设置的时候才能正确的读取。也就是说，当你使用setAttribute去设置的时候一定要和源码里的大小写保持一致，而当你在使用getAttribute去读取的时候可以忽略其大小写。
总结：为了避免不必要的问题发生，在设置自定义属性的时候不要有大小写之分。对于html节点本身有的attribute，则应该依照ie的解析去书写，比如colSpan、rowSpan、frameBorder等等。
Demo测试地址：http://www.12sui.cn/test/attribute-ie.html
测试浏览器：IE6、IE7、IE8、Opera 10.10(Build 1893)、Firefox 3.5.6、Chrome 3.0.195.38、Safari 4.0.3(531.9.1)。
昨天又遇到一个奇怪的bug，就是我用js动态删除一个td，然后将另一个td的colspan变大，来填充另一个被删掉的cell，但是，在ie6、ie7下出现了问题，就是虽然我设置了colspan，但是它并没有生效，在ie的developer toolbar上看到我也设置成功了，但是为什么没生效呢？我又试着通过toolbar去设置一次，结果发现将我输入的colspan改写成了colSpan，然后生效了，于是我在脚本里也将colspan改成了colSpan，测试通过，并且在其它浏览器下都没有问题。
Code：
td.setAttribute('colSpan','2');
Demo:http://www.12sui.cn/test/td-attribute.html
所测试浏览器版本：Opera 10.10 Beta 1840、Firefox 3.5.5、Chrome 3.0.195.21、Safari 4.0.3(531.9.1)
注：在创建时，亦适用！
昨天测试过来的bug，检查了下是因为input value值的问题，因为我代码里使用的是innerHTML做的，类似这样：
el.innerHTML = '<input type="text" value="' + str + '" />';
很明显，如果str内包含”的话自然会出现问题，当时觉得蛮简单的，我用\转义一下不就行了吗？结果发现不行，原因在于，\是JavaScript的转义符，而这里是html，并不会去认JavaScript的转义符，所以，有两个办法解决这个问题，一种是使用正常的dom方法，先创建一个input，然后为input.value赋值，这里就不存在这个”的问题了，另外一种方法是使用html转义符"或者十进制的"或者其它。。。来进行转义，方法是：
el.innerHTML = '<input type="text" value="' + str.replace(/"/g,'"') + '" />';
Demo:http://www.12sui.cn/test/html-value-escape-0911.html
自从Div+CSS风潮袭来之后，很少人愿意在自己的页面里用table了，甚至以之为耻，杯具啊。。。
最近在做的仓储物流项目里，因为有大量的数据表格，所以这一段都在跟table打交道。或者有些人根本就没听说过col和colgroup这两个标签，col可以定义表格的1列或者多列，可以通过其span属性来控制包含的列数，而colgroup跟它差不多，也同样可以通过span来控制其包含的列数。不同的是，col是一个自闭合标签，跟
类似，而colgroup可以包含col，也可以像使用col一样去使用它，不过要注意它的闭合。它们都可以单独去用，但一般我会用colgroup包含col这样来用，显得比较好看。。。^_^二者都只能在table中使用，而且不能包含其它元素。
显而易见，它们的作用主要就是来控制单元格的宽度了，这样省去单独定义每个单元格的麻烦，可能有些人会觉得其实我们只需要定义一行td的宽度就行了，效果差不多，而col可以让我们做到更多，我们可以通过col来控制几列宽度的总和，还可以控制这列的背景色。。。。仁者见仁吧~
视觉的table是千变万化的，而我们的col是没法满足每一个视觉的，有些地方还是要通过单独定义单元格来实现，总结了下各浏览器对齐css属性支持的情况，不是很全，只是自己尝试用的几个做了简单测试，测试的css为：
.t-1 { width:300px; color:red; background:#ccc; text-align:center; padding:20px; text-decoration:underline; font-weight:900; font-style:italic; font-size:18px; line-height:30px; vertical-align:bottom;}
先在各浏览器下看下Demo吧：http://www.12sui.cn/test/cols-0910.php
各浏览器的表现如下图所示：
继续阅读 »
一个多月来的新淘江湖项目中，遇到了各种各样奇怪的东东，在这里记录一下哈~
首先是编辑器问题。。。被有脚鄙视了无数次了。。。囧~
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下有，很是怪异！
继续阅读 »
最近最多的困扰就是站点、试用的地方，这个结构十分的复杂，开发在嵌套的时候总是出错，另外加上刚刚经历了一次换头的工作，新旧的变化比较大，各种各样的原因造成了挺多的问题。
结构复杂的原因在于圆角的东西，圆角套圆角，很是崩溃。其实蛮讨厌淘宝的圆角，嵌套的太多，很容易混，而且个人觉得并不是很实用的东西，自从重构的浪潮以来，大家都开始了重构，重构有诸多的好处，但是我发现其实现在只用到了一个，就是方便维护。因为，很多时候，改版基本上是要改变Dom结构的，精心的去留那么多接口的复杂的Dom结构并没发挥它应该发挥的作用。淘宝的尺寸也就那么几个，我觉得就可以抛弃现在的方法，多做几种规格，变四个为两个，其实这也没有省多少事儿，期待更优秀的圆角解决方法。
另外，每天都会有一些bug过来修改，就知道埋头去改了，没有总结这些bug的原因、类型什么的，所以下次可能继续犯此错误，经圆心指导，觉得总结好这个东西还蛮重要的，为以后的工作省掉不少的事儿。
还有就是在做任何项目的时候，都应该先了解好这个项目的现在、未来，虽然我们只是被动的去接交互过来的视觉稿，转化成demo，但是我们也应该去了解产品的方向，把握自己该怎么去做，以及该怎么去留接口，不能死做。。。
应该及时的去记录一些新发现的和纠正过来的东西，以免自己遗忘。。。貌似我又忘了不少。。。先把最近记得的记一下：
- Firefox 3.5 支持了:first-of-type伪类，这是CSS 3里边的一个东东，相关联的nth-of-type等等，应该也支持了，我具体没有测试，不了解这个东西的可以小小的看一下这里。
- Math.random()，我印象中一直以为它可以出现1的情况，但是最近发现错了，它只能小于1哈~
今天做页面发现一个问题，貌似之前也遇到过，在此记录一下哈~
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
在其它常见浏览器下未发现问题！~
继续阅读 »
最近飞猪一直问我map这个标签用来做什么？因为他看到腾讯的音乐频道用它来写导航，最开始的时候我没做思索就回答说，估计是个外行人做的吧，因为在我的印象中，这个就是最初的时候我用Fireworks切图的时候，直接输出html这样子产生的标签。然后后来飞猪说，他问过了鬼和greengnn，他们说这样子更语义化，而且鬼博客上的导航也使用了同样的标签。然后我就在网上查了查，说下我查到的结果。
首先是看W3C对map的解释：
The MAP element specifies a client-side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element’s usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms.
简单的说就是定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。特别注意一下最后一句话：The MAP element may be used without an associated image for general navigation mechanisms.意思是，map标签可以不去定义一个映射，而用来定义一个普通的导航。所以说，腾讯的做法还是比较有语义的，可能或许HTML5流行以后，nav要比map更语义化。另外，我觉得，导航上，干嘛非要用li，像腾讯这样子用a就蛮好滴，但是有一点我不喜欢的就是用float，既然用了a，用inline-block应该要比float更好用一些吧哈~
腾讯音乐频道的导航：
<map id="menu">
<div><a id="menu_index" href="http://music.qq.com">首页</a> <a id="menu_musicdata" href="/portal_v2/static/list/singerlist_0.html">正版音乐库</a> <a id="menu_first" href="/portal_v2/static/shoufa/shoufa_1.html">在线首发</a> <a id="menu_hit" href="/portal_v2/static/hit/hit_5_1.html">点击榜</a> <a id="menu_player" href="/portal_v2/static/player.html">播放器</a> <a target="_blank" class="hot" id="menu_green" href="http://vip.music.qq.com">绿钻专区<sup><span>hot</span></sup></a> <a id="mengniu" href="/portal_v2/static/player.html">下载播放器</a><a id="openplayer" href="http://service.qq.com/category/music.html" target="_blank">腾讯客服</a></div>
</map>
参考资料：
继续阅读 »
简单记录下，因为做了一次邮件的模板，在所有的环境下都是好的，结果只在outlook中是坏掉的，百度了一下，找到一下相关的东西，分享一下~
HTML邮件应该避免浮动出现的li，如果是导航的话，最好都换成a标签，因为outlook里边不支持css的float属性。另外，不要使用背景图片，outlook里仅支持背景为颜色，但是其实这个所谓的支持的颜色也是一塌糊涂，所以最好是不用~记得邮件里写margin的时候不要写负值，outlook不支持的~msdn里写的是支持width的，但是感觉没有支持，还是自适应的~
微软有一个校验邮件格式的插件，但是我装了好久没装上，不晓得是我的dw有问题还是微软的插件有问题，如果有人用别的编辑器的话不妨试试另外的插件。。反正dw里我没成功。。。最后还是拿163邮箱发，outlook收，这样子来测试的~
提供一些邮件的参考资料：
继续阅读 »
