2009-04-16之FFFFound!

No Comments

2ca7221982ebf13793bcdc06f6c0ba032ae08c0d_m

ea260170e5173f3ed7e7ec2cb35535abad109483_m

2ce28e1a4d68fcf9f118dc17b8d0761bfeca5f30_m

77a64eb2a761fc9839252af2407f31096033e263_m

安装SP1导致的Microsoft Office Setup Assistant死循环问题

No Comments

picture-6

问题

在我的Mac OS X 10.5.6中,通过自动升级安装Microsoft Office 2008 for Mac的SP1后,再次打开任意Office程序时,都会出现一个Microsoft Office Setup Assistant:

picture-1

问题是下一步通过这个窗口后,都会弹出Mirosoft Autoupdate升级窗口:

picture-2

在这里,任何选择最终都会关闭这个窗口.然后再次点击Office的任意程序,循环重新开始上面的过程.

解决

删除这两个文件:
/Users/username/Library/Preferences/Microsoft/Office 2008/Microsoft Office 2008 settings.plist
picture-4

/Applications/Microsoft Office 2008/Office/OfficePID.plist

picture-3

删除这两个文件后,再次打开Office程序时会要求重新输入用户名,单位名和序列号,但是通过后就可以正常使用了.

2009-04-14之FFFFound!

No Comments

4b17c199ece29b9710a548ee7ed1fea1faa731e2_m
以前以为中国是一只鸡,现在发现世界也是一只鸡…而且中国是…

3434261789_78d41edc9c
“地狱鸡”

8afa106a189d48f23125925e1341c96263bc6eed_m
嗯…

e43949682891dc32321e18124734665a12e8dff0_m

d6e35e92a8e28e3c49747d91bd74384623b822b8_m
波音747驼航天飞机转场

粗糙的校内

1 Comment

2009-04-14_0833

是的,你可以毫无创意地不间断运行数个月之久,没人觉得怎么样.但是你终有一天要停电…
公告吧,粗糙了点,底裤漏了一点点…

校内恢复之后最近来访功能不见了,估计也与停电有关.这个估计应该是有根据的,就是下面这个关于Facebook系统架构的幻灯片.大家有时间的话还是看一下,很有启发意义的.

http://www.slideshare.net/adityaagarwal/qcon

如何让文本块右边界对齐

No Comments

1. 问题

前几日,一个网站客户提出,文本右边凹凸不齐,不好看,有没有办法让行尾对齐呢?
我的第一反映是不太可能吧,要计算字数和长度如何如何想得很复杂.其实无知很可怕…

2. 解决

问:你知道text-align属性可以取几个值吗?
答:left,right和center.

还漏下一个:justify.当text-align取了justify含义是分散对齐,会略微地对单词和字母之间的距离做调整.

3. 效果

2009-04-10_10421
不加text-align: justify;的效果

2009-04-10_10431
加了text-align: justify;的效果

4. 讨论

值justify可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在CSS中,还需要多做些考虑。
要由用户代理(而不是CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过CSS规范特别指出,如果letter-spacing属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)。还有一些用户代理可能会减少某些行的空间,使文本挤得更紧密。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行。
CSS也没有指定应当如何处理连字符(注1)。大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于CSS没有定义连字符行为,用户代理不太可能自动加连字符。因此,在CSS中,两端对齐文本看上去没有打印出来好看,特别是元素可能太窄,以至于每行只能放下几个单词。当然,使用窄设计元素是可以的,不过要当心相应的缺点。
注1:CSS中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。

5. 参考资料

  1. CSS text-align 属性

JavaScript类中的公有私有属性和方法

1 Comment

function myConstructor(message)
{
	this.myMessage = message;

	// 私有属性
	var separator = ' -';
	var myOwner = this;

	// 私有方法
	function alertMessage()
	{
		alert(myOwner.myMessage);
	}
	alertMessage();

	// 特权方法(也是公有方法)
	this.appendMessage = function(newStuff)
	{
		this.myMessage += separator + newStuff;
		alertMessage();
	}
}

// 公有方法
myConstructor.prototype.clearMessage = function()
{
	this.myMessage = '';
}

// 静态属性
myConstructor.name = 'nocoo';

// 静态方法
myConstructor.alertName = function()
{
	alert(this.name);
}

6个常见的IE渲染Bug及其修复方法

No Comments

ie-bug

1. size,padding和margin距离异常

在IE6中,各种size,padding和margin总是感觉怪怪的,有时候死活差那么几个像素.这时候可以使用单独为IE准备的CSS文件来纠正.只需要在页面头部加类似这样的CSS文件即可:

<!--[if IE 6]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
<![EndIf]-->

其中的ie.css是对主CSS文件中,那些在IE6下显示异常的元素,重新定义的CSS.

2. 块元素居中问题

在现代浏览器中,一个块元素,假设是一个p,设置了宽度,设置左右margin都是auto之后,渲染效果应该是居中.但是在IE中,必须对其父元素,假设是body,加text-align:center;才能看到居中效果:

body { text-align: center; }

并且,你还要在子元素p里把继承的居中纠正回来:

p { text-align: left; }

3. div最小高度不能低于12px的bug

如果你需要一个高度很小的div,假设说做一个分隔线之类,你会发现div最小高度不会低于12px.这时候要设置div的line-height: 0;才行.

<div style="line-height: 0px; height: 2px;"></div>

如果还是不行,你要在div里套一个p,并且指定这个p的line-height: 0;.

<div style="height: 2px;"><p style="line-height: 0px;"></p></div>

4. 浮动元素的双倍margin距离bug

这是一个非常严重的bug.你会发现你的侧边栏总会跑到第二行去显示,或者明明你计算好宽度,平分两半,还预留了些空隙,在Firefox显示正常,在屏幕左右分布的两个块元素,在IE下非换行不可.说起来应当是IE的float块元素,margin加倍渲染的bug.
这样的代码:

.floatbox {
   float: left;
   width: 150px;
   height: 150px;
   margin: 5px 0 5px 100px;
   /*This last value applies the 100px left margin */
}

正确的渲染应该是这样:

marg-norm

但是在IE5和IE6里,margin的100px被加倍,渲染成这个样子:

marg-doubled

margin被加倍成了200px.
浮动元素的双倍margin距离bug的出现条件和特点是:

  1. float块元素
  2. margin方向与float方向相同,即float: left;的块只会加倍margin-left的值.
  3. 这个float块与其父容器的内边之间夹着这个margin的情况下,才会加倍.当前行的第二个float块,因为其左边不是父容器的内边,就不会出现这个bug.
  4. 浮动元素的双倍margin距离bug具备左右对称性.

修复很简单,在所有float的元素的CSS中加入display: inline;即可.其实根据W3C对float的定义,当float具备left或者right时,display效果应当是不起作用的,除非是display: none;,但是指定了display: inline;确实让IE6正确显示了margin.

5. 盒模型的bug

看这样一段代码:

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

根据盒模型定义,这个div的宽度应该是2+10+100+10+2=124px.大部分浏览器也是这样解析的,唯独IE6认为它是100px宽.
这个bug会对布局带来严重影响.消除这个bug只需要在页首制定DTD即可.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

此前的一篇文章这样解释:在页首制定了DTD,浏览器就认定Web开发者知道并理解DTD,于是就会使用兼容标准的方式来解析和渲染页面.

6. PNG图片不能透明bug

在IE6中,PNG图片原本透明的部分被渲染成不透明的颜色.可以使用这篇文章提到的办法修复之.
其实这个bug只会出现在设置为alpha透明方式的png图片上,导引色透明方式在IE6中则不会出现不能透明的bug.

参考资料