Monthly Archives: September 2008

div设置float后高度不自动增加

如果您没有闭合(清除)浮动元素,它将造成的后果是—–div的高度不能自动增加。

目前用来清除“闭合(清除)浮动”的方法,主要是一下四种:

1.额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。

我个人不喜欢这种方法,但是它确实是W3C推荐的方法

<div style=”clear:both;”></div>

或者使用

<br style=”clear:both;” />

2.使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。

#outer:after{
content:”.”;
height:0;
visibility:hidden;
display:block;
clear:both;
}

3.设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auto就可以在标准兼容浏览器中闭合浮动元素.

不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面。

4.浮动外部元素,float-in-float
这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。

jsfl SyntaxError:unterminated string literal

前一阵子写了个Flash网站的框架,类似GaiaFramework,我也想做一个给它有点类似的Flash扩展,让Flash的操作跟简单,省去重复劳动,所以这两天试着写了一下jsfl,一不小心就遇到了一个“SyntaxError:unterminated string literal”的错误。

网上找了一下,也没找到好的解答。后来看了一下代码,终于明白这个错误是如何出现的了。事实上我是在Flash里调用jsfl读取了一个外部的XML文件,然后,试图在扩展面板运行时打印这段XML的内容时出现了这个错误的。

public static function out(m:String)
{
MMExecute(“fl.trace(\”” + m + “\”);”);
}

上面这个就是用来调用jsfl在面板运行时打印读取到了XML内容的ActionScript的代码了,跟GaiaFramework里的是一个样的(算我抄袭他的吧,呵呵!)。也就是调用了fl.trace这个方法打印一个字符串。看上去没什么问题,但是在我把XML作为内容给它时,却出错了,开始还以为是jsfl读取文件时有问题,后来试了一下,把XML中的换行去掉就可以打印。于是,觉得问题还在这个方法了。

再细看这个方法,其实是有问题的,这个跟在jsfl里直接调用fl.trace(m);是不一样的。如果在jsfl中直接调用,那m对于fl.trace这个方法来说就是个字符串变量,fl.trace就是在打印字符串变量了,对于字符串里是不是有换行对这个方法没有影响。

但是上面是在ActionScript中调用fl.trace方法,是没有办法把m这个变量传给fl.trace这个方法的,只能将m变量的值传给fl.trace方法了。”fl.trace(\”” + m + “\”);”这个是一个字符串,而在把它当作jsfl代码执行前,m的值以经是被替换成具体的m变量的值。相当于在执行”fl.trace(\”” + “XXXX”+ “\”);”。而这个时候,如果m的值里面有换行或者”,‘号时,就会导致上面的这段代码不合js语法。最终导致上面的错误。

如果要解决错误,就的让上面的代码符合语法规范,将换行和“,’等符号替换成相应的转意字符。

public static function out(m:String)
{
m = m.replace(/\”/g, “\\\””);
m = m.replace(/\’/g, “\\\'”);
m = m.replace(/[\r\n]+/g, “\\r”);
MMExecute(“fl.trace(\”” + m + “\”);”);
}

上面就是改后的代码,试了一下,错误没有再报,内容也打印出来了。问题解决。其实在其他的javascript中也可能会遇到类似的错误的。

Google浏览器Chrome使用初体验

今天一上班就先下了个Chrome浏览器,看看Google这个搜索巨头出的浏览器会是个什么样子的。

刚下了程序安装,卡巴就报典型的木马程序,又是Google在安装Chrome时安装了GoogleUpdate的一个服务,晕了,要Update,学Firefox就不错嘛,干嘛,用户在没有你程序的时候你还放个进程在那边,占用户的资源,还让人觉得你另有所图,尤其是Google这个喜欢收集用户隐私的公司。

好吧,先放你过去吧,装上再说吧。

上面这个就是刚打开时的页面了。样子还算简洁,连菜单栏都没有。这个我喜欢。

上面这个是打开新的标签页时的显示,有最近打开的页面,还有最近的书签,这个还是不错的,不过要是能把Google书签的功能也放进来就不错了。

上面这个就是设置了,里面按用户的不同进行区分,觉得这种分法也还可以,不过,总觉得设置的东西好像没多少。

上面这个是Chrome里面的开发人员工具,初用了一下,觉得还是没Firefox里的好用。

这里还有一个任务管理器,里面还有一个傻瓜统计,可以看到Chrome和其他正在运行的浏览器的资源占用,初看了一下好像资源占用比Firefox 3要高。

上面这个是下载页面,最上面的搜索栏又开始显示Google搜索老大的地位了,不过还没有用它下过东西,看样子好像还不错的样子。

哈哈,上面这个图就是我的杰作了,我发现有时只是点击一个简单的链接竟然整个浏览器到资源占用极高,停止响应了。已经出现多次了。

我之前写过一篇博客Firefox下Flash层叠显示的怪异现象这个现象在Chrome里面也会出现,但是没那么明显了,只有在滚动滚动条时才会出现层次出错的现象,但是,还是不会像Firefox下那样天下大乱的样子。下面是两个截图,层次真好相反。另一个严重的问题是,本来我想出来的在Firefox下的解决方法,在这个下面又行不通了,即使用了iframe也一样不能正常。唉,看来类似的问题还会有好的,这又会成为很多开发人员的噩梦了。


看来,Google要靠这个浏览器实现他的目标,还有距离啊!