下午在使用tab组件的时候遇到一个问题，就是table的显隐，因为组件默认的恢复显示使用的是display:block;使得恢复显示的table在现代浏览器下脱离了原有的的面貌（仅IE浏览器保持原状），只好在table外再嵌套了一个div以解决问题。
加了display:block;的table在各浏览器下的显示，可以参照这个Demo：http://www.12sui.cn/test/display-0910.html
使用display来控制元素的显隐是比较普遍的，但是问题就在display的模式太多了，而我们经常用恢复显示的就是block，但是这个东东也往往给我们带来了诸多的不便，特别是在组件里，无法预料的元素很多。
解决的办法其实很简单，就是在恢复的时候使用el.style.display=”，我们的目的是去掉none这个属性值，所以使用这个方法可以轻易的去掉这个值，而不改变元素本身的display模式，而且还省了不少字节。。。类似的，对于采用visibility控制显隐的，在恢复的时候也可以采用这种方式，避免把visible拼错了，一不小心拼错了的话在某些浏览器（比如ie）下是不会恢复显示的，我总记不住这个单词。。。所以我都是设置为空。。。
之前会用@media all and (min-width:0) {}作为Opera、Safari等的hack使用，不知道Firefox从什么版本开始已经也支持了，反正这个是不能用啦，今天用的时候才发现，土鳖一下。。。
目前只认Opera的hack就剩下了：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { …. }，但是这个很明显太长了。。。估计没多少人能记住，也没多少人喜欢用。今天做页面的时候发现了通过使用@media all and () {}，只有Opera会认，其它浏览器不认，但是有一点需要注意的是，如果你确定要使用这个hack，必须要在样式表的末尾去用，因为在Firefox下，会将这段之后的所有样式忽略，其它浏览器不会。（类似的@media screen and () {}也一样的）
Demo地址：仅Opera能显示绿色背景 仅Firefox不能显示红色背景
测试浏览器版本：IE6、7、8、Opera 10.10 Build1840、Firefox 3.5.3、Safari 4.0.3、Google Chrome 3.0。
年初写过一次，那次主要测试的li前边的小点以及标点的问题，可以点这里看下~早上玩blog的时候想搞大第一个字又发现了一些问题：
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>first-letter</title>
<style type="text/css">
body { padding:30px; font-size:16px; font-weight:600; color:#333;}
.a,.b,.c { border:1px solid #cacaca; background-color:#eee; margin-bottom:20px; padding:0 10px;}
.a p:first-letter { color:red;}
.b:first-letter { color:blue;}
.c p:first-child:first-letter { color:orange;}
</style>
</head>
<body>
<div class="a">
<p>张韶涵好漂亮呀~</p>
<p>张韶涵好漂亮呀~</p>
<p>.a p:first-letter</p>
</div>
<div class="b">
<p>张韶涵好漂亮呀~</p>
<p>张韶涵好漂亮呀~</p>
<p>.b:first-letter</p>
</div>
<div class="c">
<p>张韶涵好漂亮呀~</p>
<p>张韶涵好漂亮呀~</p>
<p>.c p:first-child:first-letter</p>
</div>
</body>
</html>
当使用first-letter的元素的第一个子元素不是一个文本节点的时候，只有IE8、Safari、Chrome可以达到预定目标，而其它浏览器均不能完成目标， 而连续使用两次伪类可以在除了ie6外的其它浏览器下完成预期目标。各浏览器的表现如下图所示：
Demo地址：http://www.12sui.cn/test/first-letter-0909.html
所测试浏览器版本：Opera 10.10 Beta 1792、Firefox 3.5.3、Chrome 3.0.195.21、Safari 4.0.3(531.9.1)
晚上去看《麦田》，Oh ye！~
一个多月来的新淘江湖项目中，遇到了各种各样奇怪的东东，在这里记录一下哈~
首先是编辑器问题。。。被有脚鄙视了无数次了。。。囧~
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结构上改一下那个名字即可，^_^。
在每一个单独的小项目里，保留一些特定的前缀还是有些必要的，顺便提一下很久之前已经改掉的三个坏习惯：
1.之前有很长一段时间，我以为写样式的时候层次写的越深越详细越好，但是后来我发现那样子很不好，一是给后期维护带来挺多麻烦，二来覆盖的时候还是要写很长，三是增加了文件的大小，所以，越简单越好，但是主要的还是要保留的，现在我会尽量吧层次控制到4层以内。
2.在写background属性的时候，在以前一段时间，我经常会这么写：background:url(url) 0 0 no-repeat，但是很多时候我们会使用css-sprite，那么在后期调整的时候我们一般会只保留backgroud-position，这么写，我们操作起来不是很方便，所以我改成了这种方式：background:url(url) no-repeat 0 0，然后可以批量替换~
3.还有一个就是不要在li里继续嵌套ul。。。会死人的。。。
最近最多的困扰就是站点、试用的地方，这个结构十分的复杂，开发在嵌套的时候总是出错，另外加上刚刚经历了一次换头的工作，新旧的变化比较大，各种各样的原因造成了挺多的问题。
结构复杂的原因在于圆角的东西，圆角套圆角，很是崩溃。其实蛮讨厌淘宝的圆角，嵌套的太多，很容易混，而且个人觉得并不是很实用的东西，自从重构的浪潮以来，大家都开始了重构，重构有诸多的好处，但是我发现其实现在只用到了一个，就是方便维护。因为，很多时候，改版基本上是要改变Dom结构的，精心的去留那么多接口的复杂的Dom结构并没发挥它应该发挥的作用。淘宝的尺寸也就那么几个，我觉得就可以抛弃现在的方法，多做几种规格，变四个为两个，其实这也没有省多少事儿，期待更优秀的圆角解决方法。
另外，每天都会有一些bug过来修改，就知道埋头去改了，没有总结这些bug的原因、类型什么的，所以下次可能继续犯此错误，经圆心指导，觉得总结好这个东西还蛮重要的，为以后的工作省掉不少的事儿。
还有就是在做任何项目的时候，都应该先了解好这个项目的现在、未来，虽然我们只是被动的去接交互过来的视觉稿，转化成demo，但是我们也应该去了解产品的方向，把握自己该怎么去做，以及该怎么去留接口，不能死做。。。
应该及时的去记录一些新发现的和纠正过来的东西，以免自己遗忘。。。貌似我又忘了不少。。。先把最近记得的记一下：
- Firefox 3.5 支持了:first-of-type伪类，这是CSS 3里边的一个东东，相关联的nth-of-type等等，应该也支持了，我具体没有测试，不了解这个东西的可以小小的看一下这里。
- Math.random()，我印象中一直以为它可以出现1的情况，但是最近发现错了，它只能小于1哈~
一直错误的一位ie8也支持*的hack，结果发现，其实它是不支持的，于是百度到了另一个适合ie6、7、8的hack，就是 \9，很诡异。
body {
color:black;/*非ie浏览器*/
color:red\9;/*所有ie浏览器*/
*color:blue;/*ie6、7*/
_color:orange;/*ie6*/
}
另外缅怀一下ie的条件注释，这么两年了，我都没背下来。。。每次用都要百度去。。。
<!--[if IE]>ie浏览器识别<![endif]-->
<!--[if !IE]>非ie浏览器识别<![endif]-->
下午圆心分享了一个链接http://css-tricks.com/serious-form-security/，别的没学到，就看到选中文字的时候背景色不是默认的蓝色啦，蛮有趣，看了下样式，发现了::selection这个东西，据圆心说两年前就用上了，我太火星了。。。写给更火星的人看哈~
经测试，Opera、Safari、Chrome支持这个属性，Firefox支持::-moz-selection，IE尚不支持呢！~
::selection { background-color:#F9F; color:#600;}
::-moz-selection { background-color:#F9F; color:#600;}
简单记录下，因为做了一次邮件的模板，在所有的环境下都是好的，结果只在outlook中是坏掉的，百度了一下，找到一下相关的东西，分享一下~
HTML邮件应该避免浮动出现的li，如果是导航的话，最好都换成a标签，因为outlook里边不支持css的float属性。另外，不要使用背景图片，outlook里仅支持背景为颜色，但是其实这个所谓的支持的颜色也是一塌糊涂，所以最好是不用~记得邮件里写margin的时候不要写负值，outlook不支持的~msdn里写的是支持width的，但是感觉没有支持，还是自适应的~
微软有一个校验邮件格式的插件，但是我装了好久没装上，不晓得是我的dw有问题还是微软的插件有问题，如果有人用别的编辑器的话不妨试试另外的插件。。反正dw里我没成功。。。最后还是拿163邮箱发，outlook收，这样子来测试的~
提供一些邮件的参考资料：
继续阅读 »
今天在整理优化的时候，发现很多地方都用了同样的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的介绍：
继续阅读 »
