<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Luin&#039;s Blog &#187; Web</title>
	<atom:link href="http://luinlee.com/category/study-tech/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://luinlee.com</link>
	<description>A long river</description>
	<lastBuildDate>Sat, 07 Aug 2010 04:55:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>有关中文分词技术和搜索结果按相似度排序</title>
		<link>http://luinlee.com/448/%e6%9c%89%e5%85%b3%e4%b8%ad%e6%96%87%e5%88%86%e8%af%8d%e6%8a%80%e6%9c%af%e5%92%8c%e6%90%9c%e7%b4%a2%e7%bb%93%e6%9e%9c%e6%8c%89%e7%9b%b8%e4%bc%bc%e5%ba%a6%e6%8e%92%e5%ba%8f/</link>
		<comments>http://luinlee.com/448/%e6%9c%89%e5%85%b3%e4%b8%ad%e6%96%87%e5%88%86%e8%af%8d%e6%8a%80%e6%9c%af%e5%92%8c%e6%90%9c%e7%b4%a2%e7%bb%93%e6%9e%9c%e6%8c%89%e7%9b%b8%e4%bc%bc%e5%ba%a6%e6%8e%92%e5%ba%8f/#comments</comments>
		<pubDate>Thu, 22 Jul 2010 08:19:15 +0000</pubDate>
		<dc:creator>Luin</dc:creator>
				<category><![CDATA[LAMP]]></category>

		<guid isPermaLink="false">http://luinlee.com/?p=448</guid>
		<description><![CDATA[做小网站的站内搜索时要考虑到用户的查询关键字未必和数据库中相应数据准确对应，所以搜索时就要用到模糊查询。但是很多情况下Like语句也未必管用，比如用户搜索“打篮球”，可是数据库里只有“篮球”，这时做查询“LIKE &#8216;%打篮球%&#8217;”肯定不会找到结果。这时就需要对关键字进行分词。对于英文来说可以简单的根据空格来划分单词，而对于中文就有些麻烦。 好在现在有些开源的中文分词引擎分词的准确度已经相当高了，如PHP的SCWS可以把“打篮球”分成“打”和“篮球”，这样再分别查找就可以把“篮球”条目找到。然后由于SCWS是基于词频词典的，所以如果有些新词就分不出来了，比如“我爱美女”可以分解成“我爱”和“美女”，可是“我爱凤姐”就只能分成“我爱”“凤”和“姐”了。 在无法根据词库分词的情况下，我们可以采用二元分词法，即全部分成两个字组成的词，如“我爱凤姐”分成“我爱”“爱凤”“凤姐”。代码也很简单： function Fenci&#40;$word&#41; &#123; $len = mb_strlen&#40;$word, 'GBK'&#41;; for&#40;$i = 0; $i &#38;lt; $len - 1; ++$i&#41; $result&#91;&#93; = mb_substr&#40;$word, $i, 2, 'GBK'&#41;; return $result; &#125; 然而由于词语的错分也产生了一些无关的结果，如搜索“全国计算机等级考试”，SCWS会把它分成“全国”“计算机”“等级”“考试”，而数据库里有“计算机等级考试”和“大学英语水平考试”，这时这两条结果全部命中，可是后者显然不是我们想要的结果，这就需要多结果进行相似的排序。 PHP提供了一个函数可以轻易实现这个功能。它的名字就是&#8230;similar_text，如similar_text(&#8216;全国计算机等级考试&#8217;, &#8216;大学英语水平考试&#8217;, $percent), $percent返回两个字符串的相似度（百分比），测试后可知“计算机等级考试”更接近搜索词，所以把它排前面。]]></description>
			<content:encoded><![CDATA[<p><a class="highslide img_2" href="http://luinlee.com/wp-content/uploads/2010/07/Untitled-1.png" onclick="return hs.expand(this)"><img class="alignleft size-full wp-image-451" title="我爱凤姐" src="http://luinlee.com/wp-content/uploads/2010/07/Untitled-1.png" alt="" width="328" height="158" /></a>做小网站的站内搜索时要考虑到用户的查询关键字未必和数据库中相应数据准确对应，所以搜索时就要用到模糊查询。但是很多情况下Like语句也未必管用，比如用户搜索“打篮球”，可是数据库里只有“篮球”，这时做查询“LIKE &#8216;%打篮球%&#8217;”肯定不会找到结果。这时就需要对关键字进行分词。对于英文来说可以简单的根据空格来划分单词，而对于中文就有些麻烦。</p>
<p>好在现在有些开源的中文分词引擎分词的准确度已经相当高了，如PHP的<a href="http://www.ftphp.com/scws/">SCWS</a>可以把“打篮球”分成“打”和“篮球”，这样再分别查找就可以把“篮球”条目找到。然后由于SCWS是基于词频词典的，所以如果有些新词就分不出来了，比如“我爱美女”可以分解成“我爱”和“美女”，可是“我爱凤姐”就只能分成“我爱”“凤”和“姐”了。</p>
<p>在无法根据词库分词的情况下，我们可以采用二元分词法，即全部分成两个字组成的词，如“我爱凤姐”分成“我爱”“爱凤”“凤姐”。代码也很简单：</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> Fenci<span style="color: #009900;">&#40;</span><span style="color: #000088;">$word</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$len</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mb_strlen</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$word</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'GBK'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">for</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #000088;">$i</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #000088;">$len</span> <span style="color: #339933;">-</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #339933;">++</span><span style="color: #000088;">$i</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$result</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mb_substr</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$word</span><span style="color: #339933;">,</span> <span style="color: #000088;">$i</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'GBK'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$result</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>然而由于词语的错分也产生了一些无关的结果，如搜索“全国计算机等级考试”，SCWS会把它分成“全国”“计算机”“等级”“考试”，而数据库里有“计算机等级考试”和“大学英语水平考试”，这时这两条结果全部命中，可是后者显然不是我们想要的结果，这就需要多结果进行相似的排序。<br />
PHP提供了一个函数可以轻易实现这个功能。它的名字就是&#8230;similar_text，如similar_text(&#8216;全国计算机等级考试&#8217;, &#8216;大学英语水平考试&#8217;, $percent), $percent返回两个字符串的相似度（百分比），测试后可知“计算机等级考试”更接近搜索词，所以把它排前面。</p>
]]></content:encoded>
			<wfw:commentRss>http://luinlee.com/448/%e6%9c%89%e5%85%b3%e4%b8%ad%e6%96%87%e5%88%86%e8%af%8d%e6%8a%80%e6%9c%af%e5%92%8c%e6%90%9c%e7%b4%a2%e7%bb%93%e6%9e%9c%e6%8c%89%e7%9b%b8%e4%bc%bc%e5%ba%a6%e6%8e%92%e5%ba%8f/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>140个字符能干啥，能写个程序你信不信？</title>
		<link>http://luinlee.com/333/program-written-in-140-chars/</link>
		<comments>http://luinlee.com/333/program-written-in-140-chars/#comments</comments>
		<pubDate>Mon, 07 Jun 2010 15:08:59 +0000</pubDate>
		<dc:creator>Luin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[闲言碎语]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://luinlee.com/?p=333</guid>
		<description><![CDATA[前几天在网上看到一个网站征集140字写成的小说，觉得挺有意思。获得第一名的Ron Gould(墙外)大牛写的小说着实“惊艳”(尽管我英语很烂，但为了显示我坚决备战四级的决心，还是决定把它译成中文)： “时间旅行成功了！”一张纸条上写着，“不过你只能回到过去并且不能再回来了。” 当我发觉这是我自己的笔迹时，不禁打了个寒颤。 “Time travel works!” the note read. “However you can only travel to the past and one-way.” I recognized my own handwriting and felt a chill. 其它作品访问：The Winners of the Twitter Writing Contest Are… 不过有没有想过用140个字符写一个程序？ “啊！这是不可能的！”在我看到某墙外网站的一篇文章前如果有人那样问我我一定会这样回答。 可惜，事实是： 第一个程序，但不是最好的： MINI TWITTER(啊不，是迷你饭否！啊不，是迷你叽歪&#8230;啊！管它呢&#8230;) 136 chars &#60;form&#62;&#60;input name=a&#62;&#60;input type=submit&#62;&#60;/form&#62; &#60;?if&#40;strlen&#40;$_GET&#91;a&#93;&#41;&#60;140&#41; &#123;$h=fopen&#40;a,“a”&#41;;fwrite&#40;$h,$_GET&#91;a&#93;.”&#60;hr&#62;”&#41;;&#125; echo@readfile&#40;a&#41;?&#62; 它可以实现微博最简单的功能：发表消息，显示消息以及做些必要验证。 第二个程序，已经开始出人意料了： RSS/RDF parser [...]]]></description>
			<content:encoded><![CDATA[<p>前几天在网上看到一个网站征集140字写成的小说，觉得挺有意思。获得第一名的<a href="http://twitter.com/rgouldtx/statuses/818253230">Ron Gould</a>(墙外)大牛写的小说着实“惊艳”(尽管我英语很烂，但为了显示我坚决备战四级的决心，还是决定把它译成中文)：</p>
<blockquote><p>
“时间旅行成功了！”一张纸条上写着，“不过你只能回到过去并且不能再回来了。” 当我发觉这是我自己的笔迹时，不禁打了个寒颤。<br />
“Time travel works!” the note read. “However you can only travel to the past and one-way.” I recognized my own handwriting and felt a chill.
</p></blockquote>
<p>其它作品访问：<a href="http://www.copyblogger.com/twitter-writing-contest-winners/">The Winners of the Twitter Writing Contest Are…</a></p>
<h3>不过有没有想过用140个字符写一个程序？</h3>
<p>“啊！这是不可能的！”在我看到某墙外网站的一篇文章前如果有人那样问我我一定会这样回答。<br />
可惜，事实是：</p>
<p>第一个程序，但不是最好的：<br />
<strong>MINI TWITTER</strong>(啊不，是迷你饭否！啊不，是迷你叽歪&#8230;啊！管它呢&#8230;) <em>136 chars</em></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;form&gt;&lt;input name=a&gt;&lt;input type=submit&gt;&lt;/form&gt;
<span style="color: #000000; font-weight: bold;">&lt;?</span><span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">strlen</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span>a<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">&lt;</span><span style="color: #cc66cc;">140</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span><span style="color: #000088;">$h</span><span style="color: #339933;">=</span><span style="color: #990000;">fopen</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span>“a”<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>fwrite<span style="color: #009900;">&#40;</span><span style="color: #000088;">$h</span><span style="color: #339933;">,</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span>a<span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>”<span style="color: #339933;">&lt;</span>hr<span style="color: #339933;">&gt;</span>”<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
<span style="color: #b1b100;">echo</span><span style="color: #339933;">@</span><span style="color: #990000;">readfile</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>它可以实现微博最简单的功能：发表消息，显示消息以及做些必要验证。</p>
<p>第二个程序，已经开始出人意料了：<br />
<strong>RSS/RDF parser with formatted output in 135 chars of PHP</strong></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">file</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #b1b100;">as</span><span style="color: #000088;">$l</span><span style="color: #009900;">&#41;</span>
<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">preg_match</span><span style="color: #009900;">&#40;</span>’<span style="color: #339933;">/&lt;</span><span style="color: #009900;">&#40;</span>title<span style="color: #339933;">|</span>link<span style="color: #009900;">&#41;</span><span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>^<span style="color: #339933;">&lt;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span>’<span style="color: #339933;">,</span><span style="color: #000088;">$l</span><span style="color: #339933;">,</span><span style="color: #000088;">$m</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<span style="color: #b1b100;">echo</span><span style="color: #000088;">$m</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>‘<span style="color: #990000;">link</span>’?” <span style="color: #339933;">&lt;</span>a<span style="color: #339933;">&gt;</span>link<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;&lt;</span>hr<span style="color: #339933;">&gt;</span>”<span style="color: #339933;">:</span><span style="color: #000088;">$m</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>RSS解析器，怎么样？看看Demo:<br />
<a href="http://test.neziric.org/140/feed-parser.php?u=http://feeds.delicious.com/v2/rss/?count=15">http://test.neziric.org/140/feed-parser.php?u=http://feeds.delicious.com/v2/rss/?count=15</a></p>
<p>第三个程序：<br />
<strong>JPG压缩器</strong>,可以对半压缩，不过它用了186个字符。</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?</span><span style="color: #990000;">header</span><span style="color: #009900;">&#40;</span>‘Content<span style="color: #339933;">-</span>type<span style="color: #339933;">:</span>’<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>list<span style="color: #009900;">&#40;</span><span style="color: #000088;">$w</span><span style="color: #339933;">,</span><span style="color: #000088;">$h</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">=</span><span style="color: #990000;">getimagesize</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span>a<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$b</span><span style="color: #339933;">=</span><span style="color: #990000;">imagecreatetruecolor</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$w</span><span style="color: #339933;">/</span><span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span><span style="color: #000088;">$h</span><span style="color: #339933;">/</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagecopyresized</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$b</span><span style="color: #339933;">,</span><span style="color: #990000;">imagecreatefromjpeg</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span>a<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$w</span><span style="color: #339933;">/</span><span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span><span style="color: #000088;">$h</span><span style="color: #339933;">/</span><span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span><span style="color: #000088;">$w</span><span style="color: #339933;">,</span><span style="color: #000088;">$h</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>imagejpeg<span style="color: #009900;">&#40;</span><span style="color: #000088;">$b</span><span style="color: #009900;">&#41;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>最后一个，我最喜欢的：<br />
<strong>A PHP web framework in 131 chars!!!!!</strong></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">require</span> __DIR__<span style="color: #339933;">.</span>’<span style="color: #339933;">/</span>c<span style="color: #339933;">.</span>php’<span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">is_callable</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span> <span style="color: #339933;">=</span> <span style="color: #339933;">@</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span>‘c’<span style="color: #009900;">&#93;</span> ?<span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> ‘Woah<span style="color: #339933;">!</span>’<span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
  throw <span style="color: #000000; font-weight: bold;">new</span> Exception<span style="color: #009900;">&#40;</span>‘Error’<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$c</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>靠，它有一个默认控制器，访问不可用的控制器时会抛异常。不仅用了PHP5.3的新特性，而且效率相当高，这就是国外的PHP程序员(劝别真的在你的网站上用它&#8230;)。</p>
<p>P.S. 提到了国外，又想起了昨天的经历：三个寂寞男生(好吧，我不是很寂寞&#8230;)走在和谐的长安街上，迎面走来了一个可爱的武警叔叔，和蔼的盘问了我们好久，又问我们要了身份证登记。哦，明明都过去两天了！</p>
]]></content:encoded>
			<wfw:commentRss>http://luinlee.com/333/program-written-in-140-chars/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>IE6的艺术: CSS文件中的中文注释会使样式全部失效</title>
		<link>http://luinlee.com/405/ie6csschinese/</link>
		<comments>http://luinlee.com/405/ie6csschinese/#comments</comments>
		<pubDate>Thu, 18 Mar 2010 15:06:05 +0000</pubDate>
		<dc:creator>Luin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://luinlee.com/?p=405</guid>
		<description><![CDATA[今天把自己刚做完的网站放到IE6下测试了一下(补充形容词: 心情忐忑不安分守己地)，然后开始做hack，当大部分错误都被改好后，一个很奇怪的问题出现了：某个页面的CSS设置似乎全都失效了。心想IE6在那啥也不至于这么那啥吧，于是经过一段时间的摸索发现是由于CSS文件中含有中文注释，删掉后问题解决(当然把CSS文件存成utf8格式是更好的解决方法)。 下面附上别人写的一篇总结IE6 bug的文章： IE6下的CSS BUG枚举 原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs 翻译：http://www.vfresh.org/w3c/727 1、终极方法：条件注释 &#60;!&#8211;[if lte IE 6]&#62; 这段文字仅显示在 IE6及IE6以下版本。 &#60;![endif]&#8211;&#62; &#60;!&#8211;[if gte IE 6]&#62; 这段文字仅显示在 IE6及IE6以上版本。 &#60;![endif]&#8211;&#62; &#60;!&#8211;[if gt IE 6]&#62; 这段文字仅显示在 IE6以上版本（不包含IE6）。 &#60;![endif]&#8211;&#62; &#60;!&#8211;[if IE 5.5]&#62; 这段文字仅显示在 IE5.5。 &#60;![endif]&#8211;&#62; &#60;!&#8211;在 IE6及IE6以下版本中加载css&#8211;&#62; &#60;!&#8211;[if lte IE 6]&#62; &#60;link type=&#8221;text/css&#8221; rel=&#8221;stylesheet&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>今天把自己刚做完的网站放到IE6下测试了一下(补充形容词: 心情忐忑不安分守己地)，然后开始做hack，当大部分错误都被改好后，一个很奇怪的问题出现了：某个页面的CSS设置似乎全都失效了。心想IE6在那啥也不至于这么那啥吧，于是经过一段时间的摸索发现是由于CSS文件中含有中文注释，删掉后问题解决(当然把CSS文件存成utf8格式是更好的解决方法)。</p>
<p>下面附上别人写的一篇总结IE6 bug的文章：</p>
<h2>IE6下的CSS BUG枚举</h2>
<blockquote><p>原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs  翻译：http://www.vfresh.org/w3c/727</p></blockquote>
<p>1、终极方法：条件注释</p>
<blockquote><p>&lt;!&#8211;[if lte IE 6]&gt; 这段文字仅显示在 IE6及IE6以下版本。 &lt;![endif]&#8211;&gt;</p>
<p>&lt;!&#8211;[if gte IE 6]&gt; 这段文字仅显示在 IE6及IE6以上版本。 &lt;![endif]&#8211;&gt;</p>
<p>&lt;!&#8211;[if gt IE 6]&gt; 这段文字仅显示在 IE6以上版本（不包含IE6）。 &lt;![endif]&#8211;&gt;</p>
<p>&lt;!&#8211;[if IE 5.5]&gt; 这段文字仅显示在 IE5.5。 &lt;![endif]&#8211;&gt;</p>
<p>&lt;!&#8211;在 IE6及IE6以下版本中加载css&#8211;&gt;</p>
<p>&lt;!&#8211;[if lte IE 6]&gt; &lt;link type=&#8221;text/css&#8221; rel=&#8221;stylesheet&#8221; href=&#8221;css/ie6.css&#8221; mce_href=&#8221;css/ie6.css&#8221; /&gt;&lt;![endif]&#8211;&gt;</p></blockquote>
<p>缺点是在IE浏览器下可能会增加额外的HTTP请求数。</p>
<p>2、CSS选择器区分</p>
<p>IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。</p>
<blockquote><p>/* IE6 专用 */</p>
<p>.content {color:red;}</p>
<p>/* 其他浏览器 */</p>
<p>div&gt;p .content {color:blue;} &#8211;&gt;</p></blockquote>
<p>3、PNG半透明图片的问题</p>
<p>虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。</p>
<p>4、IE6下的圆角</p>
<p>IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。</p>
<p>5、IE6背景闪烁</p>
<p>如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：</p>
<blockquote><p>document.execCommand(&#8220;BackgroundImageCache&#8221;,false,true);</p></blockquote>
<p>6、最小高度</p>
<p>IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。</p>
<blockquote><p>#container {min-height:200px; height:auto !important; height:200px;}</p></blockquote>
<p>7、最大高度</p>
<blockquote><p>//直接使用ID来改变元素的最大高度<br />
var container = document.getElementById(&#8216;container&#8217;);<br />
container.style.height = (container.scrollHeight &gt; 199) ? &#8220;200px&#8221; : &#8220;auto&#8221;;</p>
<p>//写成函数来运行<br />
function setMaxHeight(elementId, height){<br />
var container = document.getElementById(elementId);<br />
container.style.height = (container.scrollHeight &gt; (height &#8211; 1)) ? height + &#8220;px&#8221; : &#8220;auto&#8221;;<br />
}</p>
<p>//函数示例<br />
setMaxHeight(&#8216;container1&#8242;, 200);<br />
setMaxHeight(&#8216;container2&#8242;, 500);</p></blockquote>
<p>8、100% 高度</p>
<p>在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。</p>
<p><span id="more-405"></span></p>
<p>9、最小宽度</p>
<p>同max-height和max-width一样，IE6也不支持min-width。</p>
<blockquote><p>//直接使用ID来改变元素的最小宽度<br />
var container = document.getElementById(&#8216;container&#8217;);<br />
container.style.width = (container.clientWidth &lt; width) ? &#8220;500px&#8221; : &#8220;auto&#8221;;</p>
<p>//写成函数来运行<br />
function setMinWidth(elementId, width){<br />
var container = document.getElementById(elementId);<br />
container.style.width = (container.clientWidth &lt; width) ? width + &#8220;px&#8221; : &#8220;auto&#8221;;<br />
}</p>
<p>//函数示例<br />
setMinWidth(&#8216;container1&#8242;, 200);<br />
setMinWidth(&#8216;container2&#8242;, 500);</p></blockquote>
<p>10、最大宽度</p>
<blockquote><p>//直接使用ID来改变元素的最大宽度<br />
var container = document.getElementById(elementId);<br />
container.style.width = (container.clientWidth &gt; (width &#8211; 1)) ? width + &#8220;px&#8221; : &#8220;auto&#8221;;</p>
<p>//写成函数来运行<br />
function setMaxWidth(elementId, width){<br />
var container = document.getElementById(elementId);<br />
container.style.width = (container.clientWidth &gt; (width &#8211; 1)) ? width + &#8220;px&#8221; : &#8220;auto&#8221;;<br />
}</p>
<p>//函数示例<br />
setMaxWidth(&#8216;container1&#8242;, 200);<br />
setMaxWidth(&#8216;container2&#8242;, 500);</p></blockquote>
<p>11、双边距Bug</p>
<p>当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。</p>
<p>12、清除浮动</p>
<p>如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。</p>
<blockquote><p>#container {border:1px solid #333; overflow:auto; height:100%;}<br />
#floated1 {float:left; height:300px; width:200px; background:#00F;}<br />
#floated2 {float:right; height:400px; width:200px; background:#F0F;}</p></blockquote>
<p>更多：http://www.twinsenliang.net/skill/20090413.html</p>
<p>13、浮动层错位</p>
<p>当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。</p>
<p>浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正，但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。</p>
<p>14、躲猫猫bug</p>
<p>在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。</p>
<p>解决方法很简单：<br />
1.在（那个未浮动的）内容之后添加一个&lt;span style=&#8221;clear: both;&#8221;&gt; &lt;/span&gt;<br />
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;</p>
<p>15、绝对定位元素的1像素间距bug</p>
<p>IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。</p>
<p>16、3像素间距bug</p>
<p>在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。<br />
给浮动层添加 display:inline 和 -3px 负值margin<br />
给中间的内容层定义 margin-right 以纠正-3px</p>
<p>17、IE下z-index的bug</p>
<p>在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。</p>
<p>18、Overflow Bug</p>
<p>在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。</p>
<p>19、横向列表宽度bug</p>
<p>如果你使用float:left;把&lt;li&gt;横向摆列，并且&lt;li&gt;内包含的&lt;a&gt;（或其他）触发了hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给&lt;a&gt;定义同样的float:left;即可。</p>
<p>20、列表阶梯bug</p>
<p>列表阶梯bug通常会在给&lt;li&gt;的子元素&lt;a&gt;使用float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。解决办法就是给&lt;li&gt;定义float:left;而非子元素&lt;a&gt;，或者给&lt;li&gt;定义display:inline;也可以解决。</p>
<p>21、垂直列表间隙bug</p>
<p>当我们使用&lt;li&gt; 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（&lt;li&gt;）之间添加空隙。</p>
<p>解决方法：把&lt;a&gt;flaot并且清除float来解决这个问题；另外一个办法就是触发&lt;a&gt;的hasLayout（如定义高宽、使用zoom:1;）；也可以给&lt;li&gt; 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。</p>
<p>22、IE6中的:hover</p>
<p>在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。</p>
<p>23、IE6调整窗口大小的 Bug</p>
<p>当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。</p>
<p>24、文本重复Bug</p>
<p>在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。</p>
]]></content:encoded>
			<wfw:commentRss>http://luinlee.com/405/ie6csschinese/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>
