﻿<?xml version="1.0" encoding="UTF-8"?><!-- generator="WordPress/2.6.2" -->
<rss version="0.92">
<channel>
	<title>xhlv's blog</title>
	<link>http://blog.xhlv.com</link>
	<description>HTML CSS JS AS PHP Mysql</description>
	<lastBuildDate>Fri, 28 Nov 2008 16:19:25 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	
	<item>
		<title>scroll事件的效率问题</title>
		<description><![CDATA[scroll事件中加了一条语句，发现IE中滚动时，CPU飙升，非常占资源。
测试了下发现，滚轮如果滚一小格，IE7会触发三次事件，IE6会触发四次事件，FF/Chrome等只触发一次，而正常滚动时，每次都会滚动好几个小格，也就导致了IE比较耗资源。
利用延迟，简单的优化了一下自己的代码：

var delay;
window.onscroll = function(){
	clearTimeout(delay);
	delay = setTimeout(function(){
		......
	},50);
}

虽然还是会执行N次clearTimeout，但和原来执行语句相比，几乎可以忽略clearTimeout，CPU不再飙升。
]]></description>
		<link>http://blog.xhlv.com/2008/11/optimizescroll-event/</link>
			</item>
	<item>
		<title>如何解决背景打印不了？</title>
		<description><![CDATA[不知道出于什么考虑，几乎所有的浏览器都默认设置了不打印背景色和背景图片。
而想打印出背景是无法通过页面代码来做到，必须设置浏览器的打印属性，这就大大降低了可靠性，因为有一定数量的用户根本就不知道还要设置一下才能打印出背景。
项目中一个页面必须满足打印的需求，由于所有小图片都整合到一起了，所以不是很想再拆出来。如果将大图position:absolute再套一个标签来显示某个区域来处理的话，就非常不合理，增加了额外的代码或脚本，而且没有加载样式时大图也破坏了整个页面结构，非常不好。
还是回归到了最原始的方法，拆成数个小图。
只是将必须打印的图片拆出来，可有可无的图片就不考虑了。
另外，禁止打印背景时，浏览器增加了一项不错的功能：将浅色文字加深，IE中如果文字颜色浅于#6E6863就会当成#6E6863来打印，如果深于#6E6863就不会变动，当用户选择了打印背景属性时，该功能就不再起作用；其他浏览器中也有类似的处理。
这个功能非常有用，不需要我们额外的去处理背景打印不了时“浅色文字深色背景”的情况了。
[不然的话，我们需要处理一下深色背景浅色文字的样式。因为深色背景色打印不出来的话，需要将浅色文字的颜色设置为深色，这样才不影响用户阅览。但这样的话，如果用户选择了“打印背景”属性怎么办呢？不就又看不到文字了？还要再把深色背景删掉，这样处理起来不是很好。]
]]></description>
		<link>http://blog.xhlv.com/2008/11/how-to-print-background/</link>
			</item>
	<item>
		<title>prettyprint fiddler2 plugin</title>
		<description><![CDATA[http://weblogs.asp.net/mschwarz/archive/2007/08/01/prettyprint-fiddler2-plugin-alpha.aspx
老外写的一个fiddler小插件，可以将代码格式化。
比如JS：一些压缩过的JS，在你查看源代码时就会看到被格式化过的代码。
需要的时候可以用一下。
]]></description>
		<link>http://blog.xhlv.com/2008/11/prettyprint-fiddler2-plugin/</link>
			</item>
	<item>
		<title>解决safari,chrome的iframe页面缓存问题</title>
		<description><![CDATA[在写一个弹出对话框时，发现对话框中的iframe在safari,chrome中有严重的缓存问题。
只要着给iframe加一个随机的name，就可以解决这个问题~
]]></description>
		<link>http://blog.xhlv.com/2008/11/iframe-cache-of-safari-and-chrome/</link>
			</item>
	<item>
		<title>utf-8编码页面IE中显示空白的解决办法</title>
		<description><![CDATA[先申明，并不是所有的IE都这样，跟版本有点关系。
刚开始我也很费解，为什么就变成空白了，其他浏览器都正常。诡异的是，右键查看源代码时能看到完整的代码，可就是显示空白，IE Developer也读不到内容。
网上查了一下，原来是IE在识别utf-8时出了点问题。
IE 解析网页编码时是 HTML 內的标识优先的，然后是 HTTP header ；而mozilla 系列的浏览器刚刚好相反。一般情况在，很多人是把排在最前面，并且在title中就出现了UTF-8中文，这样， IE在解析时，就先遇到UTF-8，不往下解析了。
当出现这种情况时，把有中文的title放到&#60;meta http-equiv=&#8221;Content-type&#8221; content=&#8221;text/html; charset=UTF-8&#8243; /&#62;后面就可以了。
]]></description>
		<link>http://blog.xhlv.com/2008/11/utf-8-blank-in-i/</link>
			</item>
	<item>
		<title>Email中的CSS支持统计</title>
		<description><![CDATA[在各种Email客户端中，很多CSS是不支持的，有人做了个统计，可供参考一下：
http://spreadsheets.google.com/ccc?key=pcUq0qEaamjm9E_brKwXECQ
]]></description>
		<link>http://blog.xhlv.com/2008/11/email-css-support/</link>
			</item>
	<item>
		<title>浏览器解析CSS</title>
		<description><![CDATA[浏览器是怎么解析CSS的呢？
首先让我们来认识一下CSSStyleDeclaration，DOM CSS的一员，也是分量最重的一个。所有的CSS都会被解析到CSSStyleDeclaration中，你可以通过它去读取CSS属性更改CSS属性。
无论你在哪里写CSS，无论你写了什么CSS，浏览器最后都会解析成一个或数个styleSheet，每个styleSheet又包含一个或多个cssRule，每个cssRule又包含零个或一个或多个style（即CSSStyleDeclaration）。这些CSSStyleDeclaration会和其他styleSheet中CSSStyleDeclaration以及相应标签中的CSSStyleDeclaration进行比较，根据权重的不同，最后生成computedStyle即最终我们所看到的样式。
举个例子：
&#60;style type=&#8221;text/css&#8221;&#62;
@import url(print.css);
b{color:yellow;}
&#60;/style&#62;
上面的代码就会生成一个styleSheet，这个styleSheet中有两个cssRule，分别是“@import url(print.css);”和“b{color:yellow;}”，第一个cssRule中没有style（会有一个子styleSheet），第二个cssRule中包含一个style是“color:yellow;”。
注意：每个style标签都会生成一个独立的styleSheet。
另外需要说明的一点，也是容易混淆的一点：
其他标签中的style属性中的CSS不能看作是真正的CSS本身，如：&#60;b style=&#8221;color:red&#8221;&#62;&#60;/b&#62;，它只是标签style属性的数值，浏览器会根据这个值去更改真正的CSSStyleDeclaration。
其实大家平时经常在和CSSStyleDeclaration打交道，比如：this.style.display=&#8221;none&#8221; ，这条JS通常我们会简单的理解成更改this对象的style属性中的值，即style=&#8221;display:none&#8221;，事实上没那么简单。
从底层来说，这条JS是用来更改CSSStyleDeclaration的，这条语句中的style实际就是CSSStyleDeclaration，浏览器首先通过这条JS更改CSSStyleDeclaration中display的值，然后CSSStyleDeclaration的cssText值会跟着被修改，最后才传达到this标签的style属性。
这也是为什么this.style.color=&#8221;red!important&#8221;无法更改color值的原因，!important只是在生成computedStyle时比较CSS权重用的，CSSStyleDeclaration中的color值不会有!important的，如果给它了，会被认为是非法值，因此this.style.color=&#8221;red!important&#8221;是无效的。
更改CSSStyleDeclaration可以有多种方式，上面的this.style.display=&#8221;none&#8221;就是一种，也是最常用的最简单的一种，在某些特殊情况下我们也可以这样来改变：this.style.cssText=&#8221;display:none&#8221; 或者 this.setAttribute(&#8221;style&#8221;,&#8221;display:none&#8221;)（不过IE不支持setAttribute(&#8221;style&#8221;,&#8221;")）。
这里this.setAttribute(&#8221;style&#8221;,&#8221;display:none&#8221;)又是另外一种情况了，它先去更改style属性的值，然后再更改CSSStyleDeclaration的值。
[说的有点混乱，有什么问题就一起探讨吧，希望都能有所收获]
]]></description>
		<link>http://blog.xhlv.com/2008/11/cssstyledeclaration-dom-css/</link>
			</item>
	<item>
		<title>FF3 Input height bug?</title>
		<description><![CDATA[在Firefox3中发现一个灵异的现象，如果给input设置了height和padding，在普通情况下不会有什么问题，但是如果input出现在iframe里的页面中有时候就会导致input的height不正常。
在项目中，我把程序生成的页面另外保存了一份，iframe设置同样的src，里面的input居然正常了。检查了文件编码和HTML代码，以及CSS，没有发现任何异常。
在官方的bugzilla中也找到了某人提的bug，但没有出来解决方法，你可以用Firefox3访问这个地址：
https://bugzilla.mozilla.org/show_bug.cgi?id=398959
https://bugzilla.mozilla.org/attachment.cgi?id=341749
https://bugzilla.mozilla.org/show_bug.cgi?id=403558
https://bugzilla.mozilla.org/attachment.cgi?id=288409
测试：

&#60;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&#62;
&#60;html xmlns="http://www.w3.org/1999/xhtml"&#62;
&#60;head&#62;
&#60;title&#62;&#60;/title&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;style type="text/css"&#62;
input {border:1px solid #ccc;height:17px;padding:5px;}
&#60;/style&#62;
&#60;input type="text" value="Text" /&#62;
&#60;/body&#62;
&#60;/html&#62;
更灵异的事情发生了，以上测试，单独写一个页面是不会出现问题的，点击上面的“View”弹出的页面中，无论FF3还是FF2都会出现height不正常。
单独写一个页面是什么效果？可以看这个：
http://blog.xhlv.com/lab/ff_input_height_bug/index.html
http://lab.xhlv.com/ff_input_height_bug/index.html
两个一模一样的页面，在不同服务器上，有的会出现bug，有的不会出现，有时会出现，有时不会出现，郁闷。。。。
Why???
(暂时的处理方法是：去掉height，只用padding&#8230;.)
]]></description>
		<link>http://blog.xhlv.com/2008/11/ff3-input-height-bug/</link>
			</item>
	<item>
		<title>display,position,float有啥特殊关系？</title>
		<description><![CDATA[float,display,position是啥东西，这里就不说了，主要来谈一下几个比较特殊，也比较有意思的关系。
一、当float为left或right时，无论是否设置display:block，浏览器都会当成block来处理。当浮动对象有左右margin且display:block时，IE6中会有双倍margin的bug，这时需要加display:inline来解决这个问题。
二、当positon为absolute时，float的属性就会失效，display的属性也会变成block。
三、如果是body,html，会出现上述情况吗？测试发现，即使不给它们float:left或position:absolute，也会类似出现上述情况。也就是说，就算你给body一个display:inline属性，并且float:auto;position:static，body也不会乖乖的inline的；只给一个float:right，也是无效的。
]]></description>
		<link>http://blog.xhlv.com/2008/10/relationships-between-display-position-float/</link>
			</item>
	<item>
		<title>非collapse border的empty-cells该如何show?</title>
		<description><![CDATA[当border-collapse:separate时，对一个空的td，在IE中是显示不了边框的，如果想让他显示边框，加“&#38;nbsp;”是一个不错的选择，那么还有其他方法可供选择吗？
在td不是很多的时候，还可以这样处理：

&#60;style type="text/css"&#62;
td {behavior:expression((this.runtimeStyle.behavior="none")&#038;&#038;((this.innerHTML=="") ? this.innerHTML="&#38;nbsp;" : false));}
&#60;/style&#62;
&#60;table border="1"&#62;
	&#60;tr&#62;
		&#60;td&#62;&#60;/td&#62;
		&#60;td&#62;&#60;/td&#62;
	&#60;/tr&#62;
&#60;/table&#62;

]]></description>
		<link>http://blog.xhlv.com/2008/10/show-emptycells/</link>
			</item>
</channel>
</rss>
