来一个例子:代码很简单,如下:

 <table border="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>sss</td>
</tr>
</table>

如此,一个表格,有两行两列,在任何浏览器下都没有任何显示错误.但是如果我加下面这句css,情况就不同了:

 <style>
tr{position: relative;}
</style>

看来是要出问题了,可是别着急,其实这个时候从表面上你看不到任何问题,页面布局绝对不会乱掉,

你看不到任何东西会重叠起来.

我可从来没有想过要耍大家,虽然表面上看不到问题,但是现在让我们的ie develop tool上场吧,它会告诉我们layout带来了什么

注意两幅图中的不同和相同.注意左边视图中的蓝色线框圈起来的东西,这个tool的作用就是右边点击某个元素会在网页中用线框框起来.

可是注意,我两次分别点击了两个不同的元素.而线框框起来的是同一个地方,我汗,我没看错吧.

是的,也就是说两个tr重叠了,可是奇怪的是tr里的元素渲染都完全正确,不影响到任何外观样式.不要以为这样是安全的,隐患在此时埋下.

我其实是在做一个模拟窗口的时候遇到这个问题的,我用了一个两行的table,第一行做窗口标题栏,可以拖动,第二行做主视图,可是后来我发现table的第二行把第一行盖住了,虽然外表看上去很正常,但是标题栏却因为被挡住不可以点击和拖动了.

要修复这个现象,去掉tr中的position即可

3.由此说来:

不知道大家写css的时候是不是用一些reset来先reset下,反正我是这样做的,我的NetBeans里的css模板里就存着reset,每个css文件头部都会有这样一段:

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 12px;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
/* 元素获得焦点时的样式! */
:focus {
outline: 0;
}
/* 特殊文本的样式! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* 细线表格样式 */
table {
border-collapse: collapse;
border-spacing: 0;
}

大家都知道要绝对定位一个元素的话,首先要使它的父元素定位,例如设置一个position:relative,这样子元素才可以absolute,然后top,left定位.

于是我就想,这样太麻烦了,我干脆给所有的元素都设置position:relative算了,然后要绝对定位的改一下position:absolute.这样免得挨个设置了,直接所有元素都可以绝对定位了.

于是本文所说的问题来了,我们给所有元素都设置了position:relative,于是table出问题了,所以说这种做法是不可取的,而且这样会引起一些其他的渲染问题,记得我在好几个地方都看到提示说不能这样设置.

本文其实是想说layout的,可是这个问题的确是ie的bug,不是layout问题,下次等我再遇到layout问题再说layout吧.顺便说一下,这真是一个奇怪的bug.

bug · ie · table · 折叠

去年就想将IE的bug系统地整理下，但一直都忙于工作、学习没有完成，看到这篇E文后，我毫不犹豫的放下了手中的工作将之翻译出来。

由于是第一次译文，所以错误在所难免，欢迎大家批评指正。

原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

翻译：http://www.vfresh.org/w3c/727(译文对原文进行了补充)

对IE6最好的策略就是不去兼容它。

好吧，我知道你的难处，你不得不去兼容IE6这个狗血的浏览器，因此不得不在兼容IE6上花费很多时间。对此，我颇有同感，来让我来帮助你吧。

我不会象许多文章那样让你去抵制IE6，这并不会帮助到你(迫不得已时)去兼容IE6；因为IE6依旧占有一定的市场份额，你无法放弃IE6。本文将帮助你来解决这个难题。

我查阅过很多资料来摘录这些解决方案（有些是我自己提供的），现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks，并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误，请联系我。

bug · css · ie · ie6 · 前端 · 备忘

什么能叫做css hack呢?
ie6的_.ie6,ie7的*,ie8的\0这些都是很出名的hack,他们之所以称得上是hack是有理由的:
(1)他们大多是浏览器的bug造成的,或者微软故意选取了一些蹩脚的方式来做hack,而且保证这些hack不会被别人使用
(2)浏览器不会修复这些hack,如果说一个方法,暂时可以用作hack,而有一天微软修复了ie6,让它不能辨认_,那么这个”_”就不能叫做hack了
(3)我支持的别人不支持的不能轻易用作hack

刚才要用到chrome和Safari的hack,我在网上搜了一下,大多数都是说将伪类”nth-of-type(1)”作为hack,我晕啊,这是css的标准属性啊,只是有的浏览器没实现而已,而且趋势是最终这个属性会被其他浏览器实现,这种东西也能做hack?
前一阵,这个hack可以用来区分chrome和Firefox,而现在Firefox也实现了这个属性,如果你以前做过100个网站,里面用了100处这个hack,欧耶,那你有事情做了,重新重构吧,累死人不偿命啊.

其他浏览器有可能实现,或者是浏览器超前实现的不能用作hack,hack必须是不会改变的,不过对于chrome来说我还真不知道该用什么hack比较安全,现在奉上chrome的hack.2010年1月份目前可用.
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color: blue; }
}
此hack在被某些压缩工具压缩后会失效

chrome · css · hack · ie

这次的任务需要用到脚本了,我们要实现一个任务栏的东西,页面上所有的container层都可以最小化到这个任务栏的层中,如果本来的层是绝对定位的(position:absolute),则最小化之后再次恢复到原来的状态时,会回到原来的位置,而如果本来的层是相对定位的(positoin:relative),则层不会记住原来的位置,因为它是流动的,每次恢复状态的时候,层都将加入到文档流中,随着文档流变化,所以对于绝对定位的层来说这种最小化更具有意义.

具体效果可以去看我的博客(用firefox或者chrome浏览)我的博客主题被我改成了wave了,而且可以最小化层:

http://www.coderbbs.cn

本文demo请见:http://www.coderbbs.cn/UED/google-wave-test.html

大家可以去体验一下google wave,目前需要邀请才能使用,我这里还有6个邀请名额,可以留言给我.

前面一篇文章已经实现了布局,但是不支持ie,虽然我的博客(http://www.coderbbs.cn)经过改进,支持了ie,但是这次加了脚本后,ie再次出现布局问题,我决定放弃ie,直接给出chrome的链接.虽然用ie7可以浏览本站,但是看不到这篇文章描述的效果,脚本被我屏蔽,ie8可以看到效果,但是有布局bug.等有时间了我再解决.

我估计google wave一上线,ie的大限就到了,chrome市场份额必将大升,不过wave占用内容超高

我们接着上次,这次要实现层的最小化,并且让所有的层都最小化到一个任务栏里,而且是可以恢复原状的,我们首先要布局出最小化后的层的样式,用到了三个新的图片:

前三个是新的圆角和边框,后面的貌似是空白的其实是标题栏右上角的几个按钮,因为是白色的,所以看不到效果,图片都是png,ie6不支持.

下面就要考虑怎么最小化某个层了,而且我们要保存它的位置和大小信息,以便可以恢复原来的样子.

恩呵呵,我首先想到的就是设置两种样式,一种是正常的样式,一种是最小化后的样式,正常的样式叫做”container”最小化后就叫做”container-min”,我将容器中的所有的样式都设置两份,一份是正常的样式,一份是最小化后的样式.例如:w-bd,是主体内容的样式,我修改后,分别在css中定义.container .w-hd和.container-min .w-hd,其中前一个是正常的样式,后一个则设置display:none;其他各个圆角和边框均设置两套,然后我在js中切换className.

例如:下面是点击最小化按钮后执行的函数:

var min_handle=function(){
	    this.parentNode.className= this.parentNode.className.replace("container","");
	    if(this.parentNode.className.indexOf("container-min")==-1)
		this.parentNode.className+=" container-min";
	    min_stack.add(this.parentNode)
	}

意思就是我首先将层的className中的container去掉,然后换成container-min,后面检测了一下,确保只加入一次,ok就是这样简单,无需其他操作,这时候层就最小化了.再加个最大化的点击函数:

var max_handle=function(){
	    this.parentNode.className= this.parentNode.className.replace("container-min","");
	    if(this.parentNode.className.indexOf("container ")==-1)
		this.parentNode.className+=" container";
	    min_stack.remove(this.parentNode)
	}

然后绑定一下事件,现在所有的层都可以最大化和最小化了,效果还不错来着.那么上面函数里的最后一句是什么呢?

别忘了,我们要最小化到任务栏,而不是原地不动.min_stack是一个单例对象,承载着一个任务栏的角色,他的构造如下:

var min_stack=function(){
	    return {
		stacker:new Array(),
		parent_stacker:new Array(),//记住父元素
		str_stacker:new Array(),//记住初始标题字符串
		container:document.getElementById("min-stack"),
		now_width:0,
		width:140,
		x_count:0,
		add:function(ele){
		    var boo=false;
		    for(var i=0;i
7) Dom.getElementsByClassName("w-hd","div",ele)[0].innerHTML=hd_html.substr(0,6);
		    }
		},
		remove:function(ele){
		    for(var i=0;i

它有两个方法:add()和remove(),顾名思义,add就是将一个元素添加到任务栏,remove就是移除一个元素;

这里面我们做了一些特殊的工作,当add()一个元素的时候,我们首先判断是不是已经添加过此元素了,防止出错,然后我们记住它的父元素,之后恢复的时候就可以将其送回父元素里面,然后我们清楚了它的位置信息,这一步很重要,每个元素都有本来的位置,我们将其添加到任务栏的时候要清除这些样式,我们用添加一个clear_position的class的方法来覆盖位置信息,之后我们可以移除此class来恢复位置信息,之后我们把层从其父元素里移出来添加到任务栏里,设置特殊样式,然后去掉最小化按钮,增加恢复按钮,之后我们将标题字数限制为6个,并记住标题信息.之后可以恢复.

在这里我们记住了很多东西,之后都可以恢复,然后层就可以回到原来的样子了.

其实就是这样简单.脚本很少,以至于我都不想封装了,直接写出来.呵呵

下一步,我想研究下所见即所得编辑器,前几天开碳酸饮料会的时候讲到的,既然有人讲到就去研究研究.

chrome · css · google · ie · js · wave · 任务栏 · 最小化 · 阴影