肉包子的摇滚生活

IE6…这个前端开发的梦魇总是在你不经意的时候给你捅一刀.这次碰到的问题是CSS多类选择符的问题。IE6不支持。

通过为表格定义border-collapse:collapse可以避免table的cellspacing在各个浏览器不一致的状况。 应用以下的reset来定义表格，即可避免cellspacing带来的问题： table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} 在《一些冷门但是关键时刻很有用的html标签与属性》这篇文章，我就提到过，table的cellspacing属性，是无法通过css来控制的。。今天碰到一个界面的问题，ff下面界面对得很整齐，但是IE下总是高出一截，无论设置td的高度如何，总是会多出那么一截出来。

先上图： 第一张为FF3，第二张为IE6，第三张为IE7，第四张为IE8. FF3跟IE8下正常的效果，在IE6,7下却如此怪异，艹。 ————- 似乎这样的问题很经常发生，这次要寻根究底找出问题原因跟解决的办法来。 IE6下默认的字体尺寸大致在 12 – 14px 之间，当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高度的层。 要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度的自动调整。比如 <div style=”height: 6px; font: 0px Arial;”></div> 或者 <div style=”height: 6px; overflow: hidden;”></div> 都可以阻止 IE 的自作聪明。 该问题在 IE7 / Firefox /Opera 下均不存在。

我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的文字，常常用来加一些提示语句，比如说点击查看详情之类的。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以。原来使用 这样的转义符号，即可实现链接提示文字换行。学习了。。

今天发现做好的页面的chrome浏览器下有一点异样，觉得奇怪，就是css的第一个规则没有生效。 后来发现自己的css文件头有加上@charset的标记（Dreamweaver写css的时候自动会加上），去掉标记后chrome正常。 上网一查，发现也有人碰到这样的状况，纪录在此。 另外也有人到chrome的官方去提出了这个问题，但是没有官方的回复。不知道chrome什么时候解决。

腾讯的童鞋翻译了一篇很好的ppt，share一下。 翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。虽然很多问题看起来是挺基础的，但是综合一下也算是个权威指南吧。可以作为指导性的材料

html的标签个数不多，大概90多个，去掉一些非标准的以及不推荐的标签，例如b,i之类的，大概剩50，60个。通常做开发的时候，用在界面上的，都是p,div,span,table,h1-h4，加上表单元素的form,input,select,textarea。除了这些之外，有些比较少用的标签往往都被忽略了，关键时候，这些标签跟属性比你绞尽脑汁去想办法解决好得多。这里一些有用的标签跟属性列举一番。以下按字母顺序介绍,后面都附带w3school提供的测试使用地址。

作为有技术追求的人，往往很容易陷入完美主义的圈套，追求绝对的完美，越是深入，越是自我陶醉。
其实我想，什么地方该用什么东西，什么东西最合适，就是好的。拘泥于标准，作茧自缚，这就不太好了。标准的主要意义并不在你坚持的这些小小细节上面。或许你现在因为标准不用的东西，哪天就成了标准。

CSS跟JavaScript开发中，最令大家头疼的问题就是浏览器兼容性了，虽然很多文章有这方面的文章，但依然让很多开发人员晕头转向，而且也不够全面。这篇文章，将全面收集css在各种浏览器下的兼容性报告，以及浏览器的渲染bug，也期待各位不断补充。

CSS跟JavaScript开发中，最令大家头疼的问题就是浏览器兼容性了，虽然很多文章有这方面的文章，但依然让很多开发人员晕头转向，而且也不够全面。这篇文章，将全面收集css和javascript在各种浏览器下的兼容性报告，也期待各位不断补充。 由于发觉内容收集越来越多，决定将CSS跟JavaScript分开。