Heluyao的博客 {11gz.com}

　　很多同学一定在为多列等高的问题头痛吧！今天提供一个很方便的控制多列等高的JS，可以控制多个标签，并循环遍历任意多个标签。不需要添加ID或class。很不错的！

　　先看html代码:

　　这里是JS代码（有用到一个JS库，DOMHelp）:

　　自己复制另存代码，测试一下，应该会与用到的时候。注意该处用到的DOMHelp库，是一个操作文档节点很方便且符合标准并兼容各浏览器的JS库。

　　现在自己对很多事情都已到了麻木的地步，其实自己并不想，自己身边的环境在渐渐的影响自己的信念！

　　自己也时时刻刻在提醒自己，要坚持自己的一些想法，可是没有办法。

　　失去了的，伸手可能也抓不回来，只能当作是回忆，人生中的一个插曲。

　　自己也感觉这两年变化很大，也许自己都不认识自己了，疏远了自己。

　　在一个前端技术很牛的BLOG里找来的。的确很牛，对技术要求到了这种境界，不得不服！

显示属性
display
list-style
position
float
clear

自身属性
width
height
margin
padding
border
background

文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

　　其实也并非必须如此照此书写顺序，只是养成良好书写习惯，对自己还是有好处啊！在前进的道路中不断美化自己的东西。

　　IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

• E[att^=’val’] //子串以’val’ 开始
• E[att$=’val’] //子串以’val’ 结束
• E[att*=’val’] //子串中包含’val’

　　IE8 支持绝大多数基本的 CSS2.1 选择器：

1. :before and :after 被支持，只支持文本，不支持图片，但还存在bug 。
2. :focus 被支持。
3. display: inline-block 被支持（只能用于内联元素）。
4. display: table 被支持。
5. list-style 完全被支持，包括值 upper-greek （此值其他浏览器均未支持）。
6. outline 被支持。
7. border-collapse, border-spacing 和 caption-side 被支持。
8. white-space 完全被支持。
9. box-sizing 被支持，不过使用的是私有属性 -ms-box-sizing 。

　　不支持的包括但不限于：:first-line 、:first-letter、opacity 和 RGBA。

　　对于原来用来区分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。

Update 08-3.8：

1. 原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。
2. 原有 IE 的 z-index bug 在 IE8 中依旧存在。
3. IE8 中产生新的 bug：当 line-heigth 小于正常值时，超出的部分将被裁切掉。
4. IE8 中依然不支持 border 的 transparent 值。
5. IE8 中 @import 只支持三层嵌套。

Update 08-3.12：

1. IE8 中 负数的text-indent 值会被裁切。
2. IE8 中依然存在 Fuzzy Specificity Bug。

1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。

2、尽量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将 <link> 放在页面尾部。

　　CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

　　Specificity 计算规则：

• 元素的 style 样式属性，加 1,0,0,0。
• 每个 ID 选择符（#id），加 0,1,0,0。
• 每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
• 每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
• 其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

• !important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
• 如果优先权一样，则按源码中“后来者居上”的原则。
• 由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。

　　今天看了aoao的blog，学到了这一招，和大家分享一下。

<!– /* window.onload=function(){ document.getElementById(“test2″).innerHTML=”传说中滴JS测试者。如果你看到我，那JS也生效了”; } <!– */ <!– #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

　　在网上运行时还要通过程序输出个“*/*”的头，不然MIME不对有的浏览器不干活。PHP的是这样：

　　<?header(’Content-type: */*’);?>

　　理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通，不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种，虽然文件大了一点，但能少了一半的请求数，帅帅滴。补充说明，直接这样使用会是两个200的，要节省还要涉及到服务器配置，最少我还不知道单程序可以实现的。

　　如果你有兴趣，那么复制代码。测试一下。怎么样？神吧！其实也没什么，只是充分利用了注释符。不过还真未曾想到还有此一招。佩服佩服！

　　今天晚上闲了，去了一些大的门户网溜达了一圈，发现了一个仅 IE6会存在的问题（暂时仅发现IE6），在某些区块上，我的鼠标中键居然失效了。很郁闷，一开始还以为自己的鼠标有问题了。后来一想不对劲，怎么就光在这个网站上就会产生呢？html肯定有问题，这就让我想到了之前在一篇文章里面看到了对overflow这个家伙的一些唠叨。

　　网页另存为一下。仔细一看，这个让我鼠标中键失效的区块的确实加了overflow这个家伙的，我去掉它以后，再次预览，问题得以解决。看来这个家伙不能乱用噢。

　　我又立刻去网上查了相关的资料。确有此事，而且问题还不仅仅只有一个。

　　另外存在的一个问题即，导致键盘的Tab键也不听使唤啦！这下用键盘浏览网页的朋友可就麻烦了（我们不排除会有用键盘操作的用户）。

　　我要说的是，我一直以来不喜欢用到这个家伙，几乎不用，除非在必须要用到区块滚动条的时候才用（为了节省面积，或者说是版式布局上的需要）。

　　最后，这个其实只是一个很微小的问题，你可以不在乎。如果你注重用户体验及WEB标准，那么就转变一下自己的观点吧，虽然这个家伙很好用，也的确有时候帮忙不少。