昨晚在玩博客的东西发现的一个问题，就是 Opera 10.5 默认的设置不了 input 和 textarea 的圆角：
input[type="text"], textarea { border-radius:5px;}
如上，如果我这么写，在 Opera 下是没有圆角效果的，而在 Chrome 下是有的，顺便测试了下 Firefox 和 Safari：
input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/}
默认情况下，Opera 和 Firefox 不会现出圆角效果，而 Chrome 和 Safari 可以，在 Opera 和 Firefox 下要想显示出圆角效果必须设置其 border-style(不能为 none)：
input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/ border-style:solid;}
或者直接设置其 width、style、color：
input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/ border:1px solid #ccc;}
昨天遇到的一个问题，虽然是自身的不合理，但是还是记录一下。
当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)。
参考资料：
首先庆祝博客又能访问了。。。不容易啊。。这年头真不好混。。。
然后我要记录一下我被小虎鄙视了，我从前一直以为inlinestyle的优先级最高。。。杯具啊。。。
最后，说下Opera，Opera最近发了两个版本，一个是Opera Unite 10.10 Final（Build1893），一个是Opera Widget 10.20 Alpha1（Build1895），推荐安装前者，后者只是一个alpha版，并不怎么稳定，而且仅仅是对widget功能的升级，针对的是Opera Widget 10.10 Build1840版本的用户，目前没有兼容，所以升级后原来版本的widget不能使用，需要重新install，推荐使用1840的用户升级，新版本加入了widget的远程调试。目前来说，Opera Widget还是需要依赖Opera的，但是Opera承诺在将来的某一天可以在不安装Opera的情况下直接使用Opera Widget，期待这一天的到来！~另外very期待Opera早点换上Presto 2.3，不过照目前来看，最快也要一年把。。。
自从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
各浏览器的表现如下图所示：
继续阅读 »
下午在使用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哈~
