昨天测试过来的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收，这样子来测试的~
提供一些邮件的参考资料：
继续阅读 »
这周刚刚百淘完。。。其实很不喜欢这样的东西。。。很被动的去听，大多数时候还是逃掉了~拓展还不错，能出去运动下，玩玩哈，虽然有点累，不过还是挺爽的哈！~其实自己喜欢挺多的运动，感觉看上去都挺好玩的，不过一样都没试过，一来没时间，二来我觉得这方面我挺笨的。。都学不会哈，所以只有羡慕别人的份，小时候一直憋在家里，我妈赶都赶不出去，现在工作什么的挺忙的，周末一个人在家里还是挺无聊的，经常的很想出去溜达溜达，不过基本没有出去溜达的机会，因为根本不知道要去哪里。总是感觉自己有很多事情没有做，一直在赶着去做，但是总是做不完的样子，觉得自己有很多事情很想去尝试，但是一直都没去尝试，太委屈自己啦，哈哈，先谈谈最近的工作吧。
在蝴蝶谷待了一个多月，每天的工作主要就是bug fix，每天都很忙，忙的一塌糊涂。有了一些心得：
1.在每个项目确定要做的时候，视觉/交互设计师一定要确保设计稿的准确性，而前端工程师也应该的仔细的审核每一个设计稿，确定设计稿中可能存在的问题，及时和交互设计师沟通进行修改，以免在后期进行各种各样的修改，给各方都带来很大的不便。
2.在做页面之前一定应该从各个设计稿中确定如何去构建，如何去做统一的规格，毕竟HTML是页面最基础的东西，就像盖房子似的，一定要把地基打好，否则房子就很难去盖好盖高（那个XXX斜塔除外哦）。能把HTML做好，后期应该少n多的麻烦，毕竟CSS和JS都是靠它来运作的。因为每个人都以为HTML很简单，所以都很随意，所以更多的CSS都被HACK充斥着，还一边的抱怨ie浏览器，自作孽，不可活哦~另外，HTML我觉得还是应该以简单为主，如果整个项目没有一个另类的或者只有一个另类的，就单独给它一个吧，不要为了它让其它n多的地方使用那么繁杂的结构，套那么多冗余的无用的棉袄。花更多的时间去考虑HTML，毕竟有了重构的概念以来，并不是每一次网站改版都要重构一次HTML，重构的意义应该在于一劳永逸，每次翻天覆地的去改，跟使用table有何分别。
继续阅读 »
今天在整理优化的时候，发现很多地方都用了同样的button按钮，但是大小不一，但是在ie下不能很好的自适宽度，所以想做的统一一点。后来发现除了在Opera下表现的比较完美外，其他浏览器下button都默认的保留的有一定的边缘，不晓得是为什么，后来就不得已的在button中套了两个span，又回到了优化前的结构，其实做的仅仅是让它在ie下自适应。
HTML Code：
<button class="btn"><span><span>这是按钮哈</span></span></button>
这样子显得很冗余，但是没办法，可能你觉得这样子做不对，那么如果我们把span放到外边的话，那么块元素的宽度我们就做不了主了，暂且不管，先看看这样子达到的效果吧。
CSS Code：
.btn { border:none; padding:0; margin:0; background:none; cursor:pointer; text-align:center;}
.btn span { display:block; font-size:14px; font-weight:600; margin:0; padding:0; color:#fff; background:url(btn.gif) 0 0 no-repeat; min-width:100px; white-space:nowrap; _width:100px;}
.btn span span { background-position:right -30px; height:20px; display:block; padding:5px 10px;}
里边套了两层的span，并设定了最小宽度为100px（其实带上padding应该是120px），而ie6下解决不支持min-width的方法很简单，就是加上一个white-space。如下图所示效果：
但是这么做其实也并没有带来什么便利，感觉一层套一层，怪怪的，到最后还是选择了固定宽度，制作几种宽度的btn图标来做，这样子省去了很多麻烦。
那么button里边套块元素是不是合理呢？来看看W3C对button的介绍：
继续阅读 »
今天遇到一个问题，就是表格里边如果有一连串的英文字符的话会把table破坏，以前基本上没考虑过这种极端情况，感觉解决它的成本太高啦。问了明城，知道了这个问题怎么搞定，跟大家分享一下，也许你们都知道啦，不过我还是第一次用这个属性哈。
首先来看下HTML代码：
<table>
<tbody>
<tr>
<td width="100">看！</td>
<td>oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</td>
</tr>
</tbody>
</table>
CSS Code：
table { width:200px; border:1px solid #ccc; border-collapse:collapse;
td { border:1px solid #ccc;}
预览一下，可以看到如下图所示的那样，table的限制不起作用，而且前边td的宽度也被占用：
首先是解决ie下的问题，就是为td添加word-break:break-all;的样式，可以强制ie下换行，但是在对Firefox却毫无作用，Firefox下需要对table使用table-layout来解决：
继续阅读 »
