<?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>Cnscorpio &#187; Web Standard</title>
	<atom:link href="http://www.cnscorpio.cn/some/web-standard/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cnscorpio.cn</link>
	<description>{夫君子之所取者远，则必有所待；所就者大，则必有所忍!}</description>
	<lastBuildDate>Wed, 07 Jul 2010 09:14:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
<cloud domain='www.cnscorpio.cn' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
		<item>
		<title>Star Craft2 CD光盘效果</title>
		<link>http://www.cnscorpio.cn/2009/12/css3-cd/</link>
		<comments>http://www.cnscorpio.cn/2009/12/css3-cd/#comments</comments>
		<pubDate>Mon, 07 Dec 2009 14:51:08 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[UE]]></category>
		<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=839</guid>
		<description><![CDATA[CD的年代有点久远了，为了怀念一下下，用Star Craft2为素材做了一个CD封面的效果。 注意，不是用Firefox 3.0+、chrome的青年朋友，请买票！ 主要使用的属性依然是：border-radius，利用它能够对左右上下的border的width进行定义。而封面上的文字主要是用了transform属性。先看看效果： 1.圆角部分，需要定义好四个圆角的半径让他们都为整个box大小的一半： border-top-left-radius:150px 150px; border-top-right-radius:150px 150px; border-bottom-right-radius:150px 150px; border-bottom-left-radius:150px 150px; 具体属性描述可以到W3C查看：CSS Backgrounds and Borders Module Level 3 2.box旋转部分，transform这个属性可以将某个元素以某个值在平面内进行旋转，正值为顺时针旋转，负值为逆时针旋转： transform:rotate&#40;-13deg&#41;; 具体属性描述还是需要到这查看：Transforms Module 我们看源代码吧： &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;title&#62;CD&#60;/title&#62; &#60;link href=&#34;http://images.youshang.com/resources/v5/css/reset.css&#34; type=&#34;text/css&#34; rel=&#34;stylesheet&#34; /&#62; &#60;style type=&#34;text/css&#34;&#62; .cross{position:absolute;top:50%;left:50%;margin:-125px 0 0 -125px;width:100px;height:100px;border:100px solid [...]]]></description>
			<content:encoded><![CDATA[<p>CD的年代有点久远了，为了怀念一下下，用Star Craft2为素材做了一个CD封面的效果。<br />
注意，不是用Firefox 3.0+、chrome的青年朋友，请买票！</p>
<p>主要使用的属性依然是：border-radius，利用它能够对左右上下的border的width进行定义。而封面上的文字主要是用了transform属性。先看看效果：</p>
<p style="text-align: center;"><img class="aligncenter" title="cd" src="http://www.cnscorpio.cn/tmp/cd.jpg" alt="" width="327" height="313" /></p>
<p>1.圆角部分，需要定义好四个圆角的半径让他们都为整个box大小的一半：</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">border-top-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">150px</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span>
border-top-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">150px</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span>
border-bottom-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">150px</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span>
border-bottom-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">150px</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span></pre></div></div>

<p>具体属性描述可以到W3C查看：<a href="http://www.w3.org/TR/css3-background/" >CSS Backgrounds and Borders Module Level 3</a></p>
<p><span id="more-839"></span></p>
<p>2.box旋转部分，transform这个属性可以将某个元素以某个值在平面内进行旋转，正值为顺时针旋转，负值为逆时针旋转：</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">transform<span style="color: #00AA00;">:</span>rotate<span style="color: #00AA00;">&#40;</span>-13deg<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span></pre></div></div>

<p>具体属性描述还是需要到这查看：<a href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/">Transforms Module </a></p>
<p>我们看源代码吧：</p>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_pw_lwi" style="width:95%;height:300px;">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;CD&lt;/title&gt;
&lt;link href=&quot;http://images.youshang.com/resources/v5/css/reset.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
.cross{position:absolute;top:50%;left:50%;margin:-125px 0 0 -125px;width:100px;height:100px;border:100px solid #000;-moz-border-radius-topleft:150px 150px;-moz-border-radius-topright:150px 150px;-moz-border-radius-bottomleft:150px 150px;-moz-border-radius-bottomright:150px 150px;-webkit-border-top-left-radius:150px 150px;-webkit-border-top-right-radius:150px 150px;-webkit-border-bottom-left-radius:150px 150px;-webkit-border-bottom-right-radius:150px 150px;background:url(http://www.cnscorpio.cn/tmp/war.jpg) 48% 0 no-repeat;}
.cross em{position:absolute;top:-40px;left:-55px;display:block;width:200px;font-size:22px;font-weight:bold;font-style:italic;letter-spacing:3px;color:#FFF;-moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);}
.cross span{position:absolute;top:100px;left:55px;display:block;width:50px;font-size:14px;font-style:italic;font-weight:bold;letter-spacing:2px;-moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;cross&quot;&gt;
		&lt;em&gt;Star  Craft ! &amp;#8482;&lt;/em&gt;
		&lt;span&gt;CD2&lt;/span&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="Run" class="runcode_button" onclick="runcode_open_new('runcode_pw_lwi');"/> <input type="button" value="Copy" class="runcode_button" onclick="runcode_copy('runcode_pw_lwi');"/> Tips:You can change the code before run.</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/12/css3-cd/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>无需尿布：HTML5+CSS3</title>
		<link>http://www.cnscorpio.cn/2009/11/html5-css3/</link>
		<comments>http://www.cnscorpio.cn/2009/11/html5-css3/#comments</comments>
		<pubDate>Sat, 14 Nov 2009 12:21:32 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=823</guid>
		<description><![CDATA[W3C在今年7月2号宣布了终止XHTML2，那么无疑就宣布了HTML5成为了继XHTML1.1后新一代的web标准之一，即使他目前还是一个草案。即使是如此，Google是在wave中将HTML5发挥的淋漓尽致，APPLE也开始在官网中使用基于HTML5的video功能，无数的组织正在开发许许多多的基于HTML5和CSS3的应用，例如这个惊人的山寨玛丽和嘀咕网的基于CSS3的圆角应用。 我越来越感觉到：所有的所有，都是为了给高级浏览器用户[当中不乏意见领袖，他们所带来的口碑传播不容忽视 ]提供更高级的浏览体验，但向下兼容低级浏览器，当然，前提是在各个不同浏览器中，视觉和交互风格是一致的。 前段时间，也对cnscorpio.cn进行了基于HTML5+CSS3的重构，虽然算不上什么大事件，但也记录下，毕竟也练了一下手。 小花了点时间写了以下的PPT，PPT中的不少例子来自这个页面：新东西一箩筐。 如果不能观看ppt，请点击我下载。]]></description>
			<content:encoded><![CDATA[<p>W3C在今年7月2号宣布了终止XHTML2，那么无疑就宣布了HTML5成为了继XHTML1.1后新一代的web标准之一，即使他目前还是一个草案。即使是如此，Google是在wave中将HTML5发挥的淋漓尽致，APPLE也开始在官网中使用基于HTML5的video功能，无数的组织正在开发许许多多的基于HTML5和CSS3的应用，例如这个惊人的<a title="山寨玛丽" href="http://www.paulbrunt.co.uk/bert/" target="_blank">山寨玛丽</a><a title="山寨玛丽" href="http://www.phpguru.org/breakout_popup.html" target="_blank"></a>和嘀咕网的基于CSS3的圆角应用。</p>
<p>我越来越感觉到：所有的所有，都是为了给高级浏览器用户[当中不乏意见领袖，他们所带来的口碑传播不容忽视 ]提供更高级的浏览体验，但向下兼容低级浏览器，当然，前提是在各个不同浏览器中，视觉和交互风格是一致的。</p>
<p>前段时间，也对cnscorpio.cn进行了基于HTML5+CSS3的重构，虽然算不上什么大事件，但也记录下，毕竟也练了一下手。</p>
<p>小花了点时间写了以下的PPT，PPT中的不少例子来自这个页面：<a href="http://www.cnscorpio.cn/lab/html5-css3.html" target="_blank">新东西一箩筐</a>。</p>
<div style="width:555px;margin:0 auto;">
<iframe src="http://docs.google.com/present/embed?id=df4snsv8_9cz7qgcdh&#038;size=m" frameborder="0" width="555" height="451"></iframe>
</div>
<p>如果不能观看ppt，请<a href="http://www.cnscorpio.cn/tmp/HTML5-CSS3.rar">点击我下载</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/11/html5-css3/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>select的高度和边框</title>
		<link>http://www.cnscorpio.cn/2009/10/select-border-height/</link>
		<comments>http://www.cnscorpio.cn/2009/10/select-border-height/#comments</comments>
		<pubDate>Fri, 30 Oct 2009 03:50:50 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=811</guid>
		<description><![CDATA[突然要美化一个顽固的select元素，才发现这个还是有点点难度的，难就难在人家IE不卖帐。 1. 先说select的高度设置吧 按照常理只要给它设置height，就完事，但在IE6 下，会比实际设定高度高出几个像素，不信你就试试在不同的浏览器下运行下面的代码。 &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;title&#62;test select&#60;/title&#62; &#60;style type=&#34;text/css&#34;&#62; body&#123;font-family:tahoma;font-size:12px;margin:0;padding:0;&#125; .select-outter&#123;position:absolute;top:50%;left:50%;width:500px; height:500px;margin:-250px auto 0 -250px;background:#F6F6F6;} &#60;/style&#62; &#60;/head&#62; &#160; &#60;body&#62; &#60;div class=&#34;select-outter&#34;&#62; &#60;select&#62; &#60;option&#62;bingo-1&#60;/option&#62; &#60;option&#62;bingo-2&#60;/option&#62; &#60;/select&#62; &#60;/div&#62; &#60;/body&#62; &#60;/html&#62; 解决办法，就是针对IE6用font-size来控制，但是字，就有点难看了-_-!。 看看代码： &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html [...]]]></description>
			<content:encoded><![CDATA[<p>突然要美化一个顽固的select元素，才发现这个还是有点点难度的，难就难在人家IE不卖帐。</p>
<p><strong>1. 先说select的高度设置吧</strong></p>
<p>按照常理只要给它设置height，就完事，但在IE6 下，会比实际设定高度高出几个像素，不信你就试试在不同的浏览器下运行下面的代码。</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;!</span>DOCTYPE html <span style="color: #000000; font-weight: bold;">PUBLIC</span> <span style="color: #0000ff;">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span>
 <span style="color: #0000ff;">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>html xmlns<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://www.w3.org/1999/xhtml&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>head<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>meta http<span style="color: #339933;">-</span>equiv<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;Content-Type&quot;</span> content<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/html; charset=utf-8&quot;</span> <span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;</span>title<span style="color: #339933;">&gt;</span>test select<span style="color: #339933;">&lt;/</span>title<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>style type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/css&quot;</span><span style="color: #339933;">&gt;</span>
body<span style="color: #009900;">&#123;</span>font<span style="color: #339933;">-</span>family<span style="color: #339933;">:</span>tahoma<span style="color: #339933;">;</span>font<span style="color: #339933;">-</span>size<span style="color: #339933;">:</span>12px<span style="color: #339933;">;</span>margin<span style="color: #339933;">:</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>padding<span style="color: #339933;">:</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
<span style="color: #339933;">.</span>select<span style="color: #339933;">-</span>outter<span style="color: #009900;">&#123;</span>position<span style="color: #339933;">:</span>absolute<span style="color: #339933;">;</span>top<span style="color: #339933;">:</span><span style="color: #cc66cc;">50</span><span style="color: #339933;">%;</span>left<span style="color: #339933;">:</span><span style="color: #cc66cc;">50</span><span style="color: #339933;">%;</span>width<span style="color: #339933;">:</span>500px<span style="color: #339933;">;</span>
height<span style="color: #339933;">:</span>500px<span style="color: #339933;">;</span>margin<span style="color: #339933;">:-</span>250px auto <span style="color: #cc66cc;">0</span> <span style="color: #339933;">-</span>250px<span style="color: #339933;">;</span>background<span style="color: #339933;">:</span><span style="color: #666666; font-style: italic;">#F6F6F6;}
</span><span style="color: #339933;">&lt;/</span>style<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>head<span style="color: #339933;">&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;</span>body<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;select-outter&quot;</span><span style="color: #339933;">&gt;</span>
    	     <span style="color: #339933;">&lt;</span>select<span style="color: #339933;">&gt;</span>
    		<span style="color: #339933;">&lt;</span>option<span style="color: #339933;">&gt;</span>bingo<span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span>option<span style="color: #339933;">&gt;</span>bingo<span style="color: #339933;">-</span><span style="color: #cc66cc;">2</span><span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
    	     <span style="color: #339933;">&lt;/</span>select<span style="color: #339933;">&gt;</span>
        <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>body<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>html<span style="color: #339933;">&gt;</span></pre></div></div>

<p>解决办法，就是针对IE6用font-size来控制，但是字，就有点难看了-_-!。</p>
<p><span id="more-811"></span></p>
<p>看看代码：</p>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_ltH2FM" style="width:95%;height:300px;">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;test select&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
body{font-family:tahoma;font-size:12px;margin:0;padding:0;}
.select-outter{position:absolute;top:50%;left:50%;width:500px;height:500px;margin:-250px auto 0 -250px;background:#F6F6F6;}
.selt{width:100px;height:19px;font-size:10px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;select-outter&quot;&gt;
    	&lt;select class=&quot;selt&quot;&gt;
    		&lt;option&gt;bingo-1&lt;/option&gt;
		&lt;option&gt;bingo-2&lt;/option&gt;
    	&lt;/select&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="Run" class="runcode_button" onclick="runcode_open_new('runcode_ltH2FM');"/> <input type="button" value="Copy" class="runcode_button" onclick="runcode_copy('runcode_ltH2FM');"/> Tips:You can change the code before run.</p>
</div>
<p><strong>2.border问题</strong></p>
<p>搞定高度了，如果我要让select的border变个颜色呢？这个也有点难，我初步的想法是通过绝对定位四个块元素到它的四个边来覆盖它本身的border，但在IE6下，还是失败，但其他浏览器都做到一致了。最后找到的方法是利用negative margin的方法来将原有select的border给隐藏，而显示它外围包含元素的border：</p>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_eLccAy" style="width:95%;height:300px;">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;test select 绝对定位方法和negative margin方法&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
body{font-family:tahoma;font-size:12px;margin:0;padding:0;}
.select-outter{position:absolute;top:50%;left:50%;width:500px;height:500px;margin:-250px auto 0 -250px;background:#F6F6F6;}
.s-out{position:relative;margin-bottom:15px;}
.selt{width:100px;height:19px;_font-size:10px;}
.ab{display:block;position:absolute;overflow:hidden;}
.t,.b,.l{left:0;width:100px;height:1px;background:#BEBEC0;}
.r,.l{top:0;width:1px;height:19px;background:#BEBEC0;}
.t,.r,.l{top:0;}
.b{top:18px;}
.r{left:99px;}
.s-out2{overflow:hidden;width:100px;height:17px;border:1px solid #BEBEC0;}
.selt2{width:103px;height:21px;_font-size:12px;margin:-2px;_line-height:21px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;select-outter&quot;&gt;
		&lt;h2&gt;绝对定位方法:&lt;/h2&gt;
		&lt;div class=&quot;s-out&quot;&gt;
	    	&lt;select class=&quot;selt&quot;&gt;
	    		&lt;option&gt;bingo-1&lt;/option&gt;
			&lt;option&gt;bingo-2&lt;/option&gt;
	    	&lt;/select&gt;
			&lt;span class=&quot;ab t&quot;&gt;&lt;/span&gt;
			&lt;span class=&quot;ab r&quot;&gt;&lt;/span&gt;
			&lt;span class=&quot;ab b&quot;&gt;&lt;/span&gt;
			&lt;span class=&quot;ab l&quot;&gt;&lt;/span&gt;
		&lt;/div&gt;
		&lt;h2&gt;negetive margin方法:&lt;/h2&gt;
		&lt;div class=&quot;s-out2&quot;&gt;
			&lt;select class=&quot;selt2&quot;&gt;
	    		      &lt;option&gt;bingo-21&lt;/option&gt;
			     &lt;option&gt;bingo-22&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="Run" class="runcode_button" onclick="runcode_open_new('runcode_eLccAy');"/> <input type="button" value="Copy" class="runcode_button" onclick="runcode_copy('runcode_eLccAy');"/> Tips:You can change the code before run.</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/10/select-border-height/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Aptana的几点优化</title>
		<link>http://www.cnscorpio.cn/2009/07/aptana-optimize/</link>
		<comments>http://www.cnscorpio.cn/2009/07/aptana-optimize/#comments</comments>
		<pubDate>Sun, 12 Jul 2009 06:27:32 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Some]]></category>
		<category><![CDATA[Web Standard]]></category>
		<category><![CDATA[aptana]]></category>
		<category><![CDATA[优化]]></category>
		<category><![CDATA[卡]]></category>
		<category><![CDATA[慢]]></category>
		<category><![CDATA[耗内存]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=671</guid>
		<description><![CDATA[Aptana，相信有不少的同学在用，他对代码的tips提醒和对js框架的特别集成把不少人给迷住了，me too，哈哈，其实我还很喜欢他对eclipse的一些继承，还有就是插件多，较灵活，例如：php的插件，ajax，svn等等。 但在使用过程中也有一些不方便，因为内核本身的一些问题，导致运行一段时间后，比较慢，比较吃内存，有时候甚至连打个字都有很大的延迟，怎么解决呢？ 看了一些网络上的资料，还有自己的使用经验，跟大家说说，希望有用。 1.将初始化文件的配置进行优化： 打开Aptana的安装目录，找到AptanaStudio.ini，用记事本打开，将里面的默认配置修改为下面的配置，前提是内存在2G左右，太小的内存，设置后作用也不大： -name Aptana Studio -vmargs -Xmx512M -Xms128M -XX:MaxPermSize=256m -Djava.awt.headless=true 2.取消在编辑环境下的自动截断字符选项，这个是我通过N多次修改不同的选项后，才发现这个是吃内存、使得编辑状态延迟大的最大原因-_-!! 设置如下&#8212;》window&#8212;》preferences&#8212;》aptana&#8212;》editors&#8212;》advanced 取消 enable word wrap 前的选中。 图示： 3.将没必要的启动选项，或者叫plug-ins去掉 general&#8212;》startup &#38; shutdown&#8212;》 设置完后，重新启动aptana，启动速度和编辑速度应该会有一个提升了。]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-674  aligncenter" title="aptana" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/aptana.png" alt="aptana" width="231" height="75" /></p>
<p>Aptana，相信有不少的同学在用，他对代码的tips提醒和对js框架的特别集成把不少人给迷住了，me too，哈哈，其实我还很喜欢他对eclipse的一些继承，还有就是插件多，较灵活，例如：php的插件，ajax，svn等等。</p>
<p>但在使用过程中也有一些不方便，因为内核本身的一些问题，导致运行一段时间后，比较慢，比较吃内存，有时候甚至连打个字都有很大的延迟，怎么解决呢？</p>
<p>看了一些网络上的资料，还有自己的使用经验，跟大家说说，希望有用。</p>
<p><span id="more-671"></span></p>
<p>1.将初始化文件的配置进行优化：</p>
<p>打开Aptana的安装目录，找到AptanaStudio.ini，用记事本打开，将里面的默认配置修改为下面的配置，前提是内存在2G左右，太小的内存，设置后作用也不大：</p>
<p>-name<br />
Aptana<br />
Studio<br />
-vmargs<br />
-Xmx512M<br />
-Xms128M<br />
-XX:MaxPermSize=256m<br />
-Djava.awt.headless=true</p>
<p>2.取消在编辑环境下的自动截断字符选项，这个是我通过N多次修改不同的选项后，才发现这个是吃内存、使得编辑状态延迟大的最大原因-_-!!</p>
<p>设置如下&#8212;》window&#8212;》preferences&#8212;》aptana&#8212;》editors&#8212;》advanced</p>
<p>取消 enable word wrap 前的选中。</p>
<p>图示：</p>
<p style="text-align: center;"><img class="size-full wp-image-672  aligncenter" title="1" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/1.png" alt="1" width="373" height="386" /></p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-673" title="2" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/21.png" alt="2" width="456" height="282" /></p>
<p>3.将没必要的启动选项，或者叫plug-ins去掉</p>
<p>general&#8212;》startup &amp; shutdown&#8212;》</p>
<p><img class="aligncenter size-full wp-image-675" title="3" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/3.png" alt="3" width="427" height="378" />设置完后，重新启动aptana，启动速度和编辑速度应该会有一个提升了。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/07/aptana-optimize/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>到底有几种圆角的实现方法？</title>
		<link>http://www.cnscorpio.cn/2009/07/round-corner/</link>
		<comments>http://www.cnscorpio.cn/2009/07/round-corner/#comments</comments>
		<pubDate>Fri, 10 Jul 2009 10:22:13 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=658</guid>
		<description><![CDATA[在web页面中通常会使用多个区块来区分展现不同的信息，这多个区块一般会有一定的间隔，并在视觉上做一些处理引导。而每个独立的区块的边缘就会是视觉设计师考虑比较多的地方。 区块的边缘里，四个角是最难处理的地方，目前用的最多的，就是直角和圆角，欧美站点里，直角给人一种硬朗、商务、犀利和直接的感觉，直角风用的最普遍的就是yahoo.com了: 对于圆角，我想很多做视觉的朋友都会想到Mac、iphone，没错，圆角相对于端正的方角，更有亲和力、圆润、活泼和极度的欲参与感。这个在apple.com上随处可见，i家族的产品上，也到处是它的影子。 近一两年来，web视觉中，圆角用的越来越多，并且慢慢的往上面添加了不同的风格样式，演变除了阴影圆角，半透明圆角等等，为的就是传递上面所提到几种感觉，提升用户浏览站点过程中的美妙体验。好了，啰嗦了这么多，进入正题：如何在web页面上实现圆角？ 1.图片圆角 用圆角形状的图片来对四个边角或者某些边角进行遮罩，这种方式用的最多，思路有几种： 1.1 切取需要的边角图片，一般会将其做到sprite上，然后使用使用css定位到需要的某些边角上，而最外围的块元素设置border或者background，这样从整体上看就是一个圆润活泼的圆角框了。 eg1: 上面的小圆圈就是四个边角的sprite，高为8px，宽为8px，待会的例子中将会使用它来做四个圆角。 &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;title&#62;图片圆角&#60;/title&#62; &#60;style type=&#34;text/css&#34;&#62; .r-n-1{position:relative;width:200px;height:200px;margin:20px auto 0 auto;background:#F6F6F6;border:#DEDEDE 1px solid;} .lt,.rt,.lb,.rb{display:block;overflow:hidden;position:absolute;width:4px;height:4px;background-image:url(http://www.cnscorpio.cn/tmp/r-n.png);background-repeat:no-repeat;} .lt{top:-1px;left:-1px;background-position:left top;} .rt{top:-1px;right:-1px;background-position:-4px top;} .lb{bottom:-1px;left:-1px;background-position:left -4px;} .rb{bottom:-1px;right:-1px;background-position:-4px -4px;} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;div class=&#34;r-n-1&#34;&#62; &#60;span class=&#34;lt&#34;&#62;&#60;/span&#62; &#60;span class=&#34;rt&#34;&#62;&#60;/span&#62; &#60;span class=&#34;lb&#34;&#62;&#60;/span&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>在web页面中通常会使用多个区块来区分展现不同的信息，这多个区块一般会有一定的间隔，并在视觉上做一些处理引导。而每个独立的区块的边缘就会是视觉设计师考虑比较多的地方。</p>
<p>区块的边缘里，四个角是最难处理的地方，目前用的最多的，就是直角和圆角，欧美站点里，直角给人一种硬朗、商务、犀利和直接的感觉，直角风用的最普遍的就是<a href="http://www.yahoo.com" target="_blank">yahoo.com</a>了:</p>
<p style="text-align: center;"><img class="size-full wp-image-659  aligncenter" title="yahoo" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/yahoo.png" alt="yahoo" width="372" height="197" /></p>
<p>对于圆角，我想很多做视觉的朋友都会想到Mac、iphone，没错，圆角相对于端正的方角，更有亲和力、圆润、活泼和<strong>极度的欲参与感</strong>。这个在<a href="http://www.apple.com" target="_blank">apple.com</a>上随处可见，i家族的产品上，也到处是它的影子。</p>
<p style="text-align: center;"><img class="size-full wp-image-660  aligncenter" title="apple" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/apple.png" alt="apple" width="360" height="209" /></p>
<p>近一两年来，web视觉中，圆角用的越来越多，并且慢慢的往上面添加了不同的风格样式，演变除了阴影圆角，半透明圆角等等，为的就是传递上面所提到几种感觉，提升用户浏览站点过程中的美妙体验。好了，啰嗦了这么多，进入正题：如何在web页面上实现圆角？</p>
<h3><strong>1.图片圆角</strong></h3>
<p>用圆角形状的图片来对四个边角或者某些边角进行遮罩，这种方式用的最多，思路有几种：</p>
<p>1.1 切取需要的边角图片，一般会将其做到sprite上，然后使用使用css定位到需要的某些边角上，而最外围的块元素设置border或者background，这样从整体上看就是一个圆润活泼的圆角框了。</p>
<p>eg1:</p>
<p style="text-align: center;"><img class="size-full wp-image-661  aligncenter" title="r-n" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/r-n.png" alt="r-n" width="8" height="8" /></p>
<p>上面的小圆圈就是四个边角的sprite，高为8px，宽为8px，待会的例子中将会使用它来做四个圆角。</p>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_RVCwXf" style="width:95%;height:300px;">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;图片圆角&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
.r-n-1{position:relative;width:200px;height:200px;margin:20px auto 0 auto;background:#F6F6F6;border:#DEDEDE 1px solid;}
.lt,.rt,.lb,.rb{display:block;overflow:hidden;position:absolute;width:4px;height:4px;background-image:url(http://www.cnscorpio.cn/tmp/r-n.png);background-repeat:no-repeat;}
.lt{top:-1px;left:-1px;background-position:left top;}
.rt{top:-1px;right:-1px;background-position:-4px top;}
.lb{bottom:-1px;left:-1px;background-position:left -4px;}
.rb{bottom:-1px;right:-1px;background-position:-4px -4px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;r-n-1&quot;&gt;
		&lt;span class=&quot;lt&quot;&gt;&lt;/span&gt;
		&lt;span class=&quot;rt&quot;&gt;&lt;/span&gt;
		&lt;span class=&quot;lb&quot;&gt;&lt;/span&gt;
		&lt;span class=&quot;rb&quot;&gt;&lt;/span&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="Run" class="runcode_button" onclick="runcode_open_new('runcode_RVCwXf');"/> <input type="button" value="Copy" class="runcode_button" onclick="runcode_copy('runcode_RVCwXf');"/> Tips:You can change the code before run.</p>
</div>
<p>1.2 由上面这种方法可以延伸出很多类似的实现方式，例如将顶部的两个圆角跟上边框切到一起，底部的两个圆角和底边框切到一起，两张独立的图片做为上下两个块元素的背景，这里就不再列举了，直接看图样。<br />
<span id="more-658"></span><br />
eg:</p>
<p style="text-align: center;"><img class="size-full wp-image-662  aligncenter" title="2" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/2.png" alt="2" width="300" height="15" /></p>
<p><strong>优点：圆角的弧度可以随意定制，而且风格能够多变，视觉效果上也更漂亮。</strong></p>
<p><strong>缺点：需要使用图片来处理，虽然图片不会很大，但增加了一定的工作量，css和结构都相对复杂，在ie6下需要注意一下兼容性。</strong></p>
<h3><strong>2.css+xhtml实现的像素圆角</strong></h3>
<p>使用css+xhtml实现的方式需要几乎一样的标签结构，但要复杂一点，其实就是顶部或者底部的一个块状元素实现上下边线，且宽度比整个外层元素要小一点，接着就堆砌两到三个块状元素来补缺圆润，且颜色要比边框稍微淡一点，这样看起来就不会太过生硬，直接看例子，说比较费劲。</p>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_gaZrnA" style="width:95%;height:300px;">
  &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;test rcn&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}/*round corner*/
.rcn-cont-bn{border:1px solid;border-bottom:0;border-top:0;}/*no border-bottom*/
.rcn-cont-bt{border:1px solid;border-top:0;}/*border-bottom*/
.rcn-out{display:block;height:4px;margin:0 auto;}
.rcn1,.rcn2,.rcn3{display:block;font-size:1px;height:1px;line-height:1px;border-style:solid;overflow:hidden;}
.rcn1,.rcn2{background:#FFFFFF none repeat scroll 0 50%;}
.rcn1{border-width:0 1px;height:2px;margin:0 1px;}
.rcn2{border-width:0 2px;height:1px;margin:0 2px;}
.rcn3{border:0;height:1px;margin:0 4px;background:#C9C8C8;}/*change color here*/
.rcn-cont-bn,.rcn-cont-bt,.rcn1,.rcn2{border-color:#D1D1D1;}/*change color here*/
.box{width:300px;margin:0 auto;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;box&quot;&gt;
        &lt;span class=&quot;rcn-out&quot;&gt;
            &lt;span class=&quot;rcn3&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;rcn2&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;rcn1&quot;&gt;&lt;/span&gt;
        &lt;/span&gt;
    	&lt;div class=&quot;rcn-cont-bn&quot;&gt;
            &lt;div&gt;cnscorpio.cn---------------&lt;/div&gt;
            &lt;div&gt;KDUED.COM------------------&lt;/div&gt;
        &lt;/div&gt;
        &lt;span class=&quot;rcn-out&quot;&gt;
            &lt;span class=&quot;rcn1&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;rcn2&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;rcn3&quot;&gt;&lt;/span&gt;
        &lt;/span&gt;
    &lt;/div&gt;
	&lt;div class=&quot;box&quot;&gt;
        &lt;span class=&quot;rcn-out&quot;&gt;
            &lt;span class=&quot;rcn3&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;rcn2&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;rcn1&quot;&gt;&lt;/span&gt;
        &lt;/span&gt;
    	&lt;div class=&quot;rcn-cont-bt&quot;&gt;
            &lt;div&gt;cnscorpio.cn---------------&lt;/div&gt;
            &lt;div&gt;KDUED.COM------------------&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="Run" class="runcode_button" onclick="runcode_open_new('runcode_gaZrnA');"/> <input type="button" value="Copy" class="runcode_button" onclick="runcode_copy('runcode_gaZrnA');"/> Tips:You can change the code before run.</p>
</div>
<p>css+xhtml像素圆角的做法很久以前就有，但使用的站点不多，有的同学甚至为了做到极致，使用的N多层的标签来做更圆润的圆角，得不偿失，上面的方法仅仅用了8个标签加少量css来实现四个圆角，应该说性价比还是比较高的。</p>
<p><strong>优点：可以很方便的重用，且颜色值可以随时调整，比较轻量和简单，目前我比较喜欢这个方法，兼容性问题少。</strong></p>
<p><strong>缺点：圆角的弧度稍稍有点粗糙，有点点的毛刺，但是通过将边角的颜色淡化后，已经很接近使用图片的效果了。</strong></p>
<h3><strong>3.伟大的css3 圆角</strong></h3>
<p >使用真正的css圆角可以不用再添加任何多余的标签结构就能实现完美的圆角，这个要得益于css3的伟大创新，使用css3的圆角目前还没有那个浏览器能够很好的原生支持<a href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius">border-radius</a>。</p>
<p style="text-align: center;"><img class="size-full wp-image-664  aligncenter" title="w3c-r-n" src="http://www.cnscorpio.cn/wp-content/uploads/2009/07/w3c-r-n.png" alt="w3c-r-n" width="550" height="237" /></p>
<p>目前支持这一css3特性的有：Safari 3&#8212;webkit核心、firefox&#8212;Gecko核心、Konquror&#8212;kde核心、chrome&#8212;webkit核心<br />
他们都使用私有属性来支持css圆角：<br />
<strong>firefox</strong>：-moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomleft -moz-border-radius-bottomright<br />
<strong>Konquror：</strong>-khtml-border-radius<br />
<strong>chrome，Safari ：</strong>-webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius</p>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_1Zz4IU" style="width:95%;height:300px;">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;css3圆角&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
.r-c{background-color:#CCC;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;border-radius:6px;border:1px solid #000;padding:10px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;r-c&quot; &gt;
		text round-corner
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="Run" class="runcode_button" onclick="runcode_open_new('runcode_1Zz4IU');"/> <input type="button" value="Copy" class="runcode_button" onclick="runcode_copy('runcode_1Zz4IU');"/> Tips:You can change the code before run.</p>
</div>
<p><strong>优点：兼容性好，视觉效果和图片实现方式没有两样，轻量，成本低。</strong></p>
<p><strong>缺点：目前很那啥的IE的不支持使得这一个好的技术没能铺开。</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/07/round-corner/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>line-height和字体实际高度的计算</title>
		<link>http://www.cnscorpio.cn/2009/06/line-height-2/</link>
		<comments>http://www.cnscorpio.cn/2009/06/line-height-2/#comments</comments>
		<pubDate>Sat, 13 Jun 2009 19:26:43 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=593</guid>
		<description><![CDATA[最近讨论到了line-height的问题，做了一个实验，分别测试占主流的Firefox、IE6、IE7、IE8下的line-height的算法。 1.第一种情况，字体为宋体，在不设置line-height时，font-size:12px。 Firefox&#8212;-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。 IE6&#8212;&#8211;字体实际高度为11px，上留白0，下留白3px，上下所占空间为14px。 IE7&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。 IE8&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。 2.第二种情况，，字体为宋体，设置font-size:12px，line-height :12px，在IE下给每一行文本都设置了背景色用来突出它的区域。 Firefox&#8212;-字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。 IE6&#8212;&#8211;字体实际高度为11px，在这个line-height值上，IE6很奇怪，字体向上突出了，下留白1px，上下所占空间为12px。 IE7&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。 IE8&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。 3.第三种情况，，字体为宋体，设置font-size:12px，line-height :14px，在IE下给每一行文本都设置了背景色用来突出它的区域。 Firefox&#8212;-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。 IE6&#8212;&#8211;字体实际高度为11px，在这个line-height值上，上留白为0，下留白3px，上下所占空间为14px。 IE7&#8212;&#8211;字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。 IE8&#8212;&#8211;字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。 4.第四种情况，，字体为宋体，设置font-size:12px，line-height :19px，在IE下给每一行文本都设置了背景色用来突出它的区域。 Firefox&#8212;-字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。 IE6&#8212;&#8211;字体实际高度为11px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为19px。 IE7&#8212;&#8211;字体实际高度为11px，上留白4px，下留白4px，上下所占空间为19px。 IE8&#8212;&#8211;字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。 5.第五种情况，，字体为宋体，设置font-size:13px，line-height:20px，在IE下给每一行文本都设置了背景色用来突出它的区域。 Firefox&#8212;-字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。 IE6&#8212;&#8211;字体实际高度为12px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为20px。 IE7&#8212;&#8211;字体实际高度为12px，上留白4px，下留白4px，上下所占空间为20px。 IE8&#8212;&#8211;字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。 6.第六种情况，字体为宋体，设置font-size:13px， line-height:21px。 Firefox&#8212;-字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。 IE6&#8212;&#8211;字体实际高度为12px，上留白3px，下留白6px，上下所占空间为21px。 IE7&#8212;&#8211;字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。 IE8&#8212;&#8211;字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。 7.第七种情况，字体为tahoma，设置line-height:12px; font-size:20px。 在这种字体下字体的实际高度为12px，上留白为2px，下留白为4px，上下所占空间为18px。 总于到[貌似不完全，不能一一测试所有字体和所有浏览器]总结了： 1.宋体下如果用px做为单位，且显示的字体为宋体，则，8px&#60;font-size&#60;18px时font-size(px) = 字体实际高度(px)+1px；font-size&#60;9px时font-size(px) = 字体实际高度(px)；font-size&#62;17px时font-size(px) = 字体实际高度(px)+2px。 2.宋体下如果用px做为单位，且显示的字体为宋体，line-height = 字体实际高度(px)+上留白(px)+下留白(px) 2.1  如果font-size为偶数，而line-height为偶数： Firefox下: 下留白(px)-1px = 上留白(px) [...]]]></description>
			<content:encoded><![CDATA[<p>最近讨论到了line-height的问题，做了一个实验，分别测试占主流的Firefox、IE6、IE7、IE8下的line-height的算法。</p>
<p>1.第一种情况，字体为宋体，在不设置line-height时，font-size:12px。</p>
<p>Firefox&#8212;-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。</p>
<p><img class="aligncenter size-full wp-image-597" title="f121" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/f121.png" alt="f121" width="376" height="186" /></p>
<p><span id="more-593"></span></p>
<p>IE6&#8212;&#8211;字体实际高度为11px，上留白0，下留白3px，上下所占空间为14px。</p>
<p><img class="aligncenter size-full wp-image-598" title="ie6-f12" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie6-f12.png" alt="ie6-f12" width="271" height="249" /></p>
<p>IE7&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。</p>
<p><img class="aligncenter size-full wp-image-599" title="ie7-f12" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie7-f12.png" alt="ie7-f12" width="265" height="226" /></p>
<p>IE8&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。</p>
<p><img class="aligncenter size-full wp-image-600" title="ie8-f12" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie8-f12.png" alt="ie8-f12" width="254" height="222" /></p>
<p>2.第二种情况，，字体为宋体，设置font-size:12px，line-height :12px，在IE下给每一行文本都设置了背景色用来突出它的区域。</p>
<p>Firefox&#8212;-字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。</p>
<p><img class="aligncenter size-full wp-image-601" title="f12-lh-12" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/f12-lh-12.png" alt="f12-lh-12" width="398" height="153" /></p>
<p>IE6&#8212;&#8211;字体实际高度为11px，在这个line-height值上，IE6很奇怪，字体向上突出了，下留白1px，上下所占空间为12px。</p>
<p><img class="aligncenter size-full wp-image-602" title="ie6-f12-lh-12" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie6-f12-lh-12.png" alt="ie6-f12-lh-12" width="505" height="206" /></p>
<p>IE7&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。</p>
<p><img class="aligncenter size-full wp-image-603" title="ie7-f12-lh-12" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie7-f12-lh-12.png" alt="ie7-f12-lh-12" width="425" height="207" /></p>
<p>IE8&#8212;&#8211;字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。</p>
<p><img class="aligncenter size-full wp-image-605" title="ie8-f12-lh-12" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie8-f12-lh-12.png" alt="ie8-f12-lh-12" width="395" height="216" /></p>
<p>3.第三种情况，，字体为宋体，设置font-size:12px，line-height :14px，在IE下给每一行文本都设置了背景色用来突出它的区域。</p>
<p>Firefox&#8212;-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。</p>
<p><img class="aligncenter size-full wp-image-606" title="f12-lh-14" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/f12-lh-14.png" alt="f12-lh-14" width="512" height="184" /></p>
<p>IE6&#8212;&#8211;字体实际高度为11px，在这个line-height值上，上留白为0，下留白3px，上下所占空间为14px。</p>
<p><img class="aligncenter size-full wp-image-607" title="ie6-f12-lh-14" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie6-f12-lh-14.png" alt="ie6-f12-lh-14" width="381" height="231" /></p>
<p>IE7&#8212;&#8211;字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。</p>
<p><img class="aligncenter size-full wp-image-608" title="ie7-f12-lh-14" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie7-f12-lh-14.png" alt="ie7-f12-lh-14" width="395" height="234" /></p>
<p>IE8&#8212;&#8211;字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。</p>
<p><img class="aligncenter size-full wp-image-609" title="ie8-f12-lh-14" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie8-f12-lh-14.png" alt="ie8-f12-lh-14" width="380" height="235" /></p>
<p>4.第四种情况，，字体为宋体，设置font-size:12px，line-height :19px，在IE下给每一行文本都设置了背景色用来突出它的区域。</p>
<p>Firefox&#8212;-字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。</p>
<p><img class="aligncenter size-full wp-image-610" title="f12-lh-19" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/f12-lh-19.png" alt="f12-lh-19" width="501" height="243" /></p>
<p>IE6&#8212;&#8211;字体实际高度为11px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为19px。</p>
<p><img class="aligncenter size-full wp-image-611" title="ie6-f12-lh-19" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie6-f12-lh-19.png" alt="ie6-f12-lh-19" width="383" height="317" /></p>
<p>IE7&#8212;&#8211;字体实际高度为11px，上留白4px，下留白4px，上下所占空间为19px。</p>
<p><img class="aligncenter size-full wp-image-612" title="ie7-f12-lh-19" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie7-f12-lh-19.png" alt="ie7-f12-lh-19" width="386" height="311" /></p>
<p>IE8&#8212;&#8211;字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。</p>
<p><img class="aligncenter size-full wp-image-613" title="ie8-f12-lh-19" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie8-f12-lh-19.png" alt="ie8-f12-lh-19" width="342" height="316" /></p>
<p>5.第五种情况，，字体为宋体，设置font-size:13px，line-height:20px，在IE下给每一行文本都设置了背景色用来突出它的区域。</p>
<p>Firefox&#8212;-字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。</p>
<p><img class="aligncenter size-full wp-image-614" title="f13-lh-20" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/f13-lh-20.png" alt="f13-lh-20" width="446" height="262" /></p>
<p>IE6&#8212;&#8211;字体实际高度为12px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为20px。</p>
<p><img class="aligncenter size-full wp-image-615" title="ie6-f13-lh-20" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie6-f13-lh-20.png" alt="ie6-f13-lh-20" width="387" height="336" /></p>
<p>IE7&#8212;&#8211;字体实际高度为12px，上留白4px，下留白4px，上下所占空间为20px。</p>
<p><img class="aligncenter size-full wp-image-616" title="ie7-f13-lh-20" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie7-f13-lh-20.png" alt="ie7-f13-lh-20" width="365" height="332" /></p>
<p>IE8&#8212;&#8211;字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。</p>
<p><img class="aligncenter size-full wp-image-617" title="ie8-f13-lh-20" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie8-f13-lh-20.png" alt="ie8-f13-lh-20" width="371" height="333" /></p>
<p>6.第六种情况，字体为宋体，设置font-size:13px， line-height:21px。</p>
<p>Firefox&#8212;-字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。</p>
<p><img class="aligncenter size-full wp-image-619" title="f13-lh-21" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/f13-lh-21.png" alt="f13-lh-21" width="363" height="254" /></p>
<p>IE6&#8212;&#8211;字体实际高度为12px，上留白3px，下留白6px，上下所占空间为21px。</p>
<p><img class="aligncenter size-full wp-image-620" title="ie6-f13-lh-21" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie6-f13-lh-21.png" alt="ie6-f13-lh-21" width="341" height="360" /></p>
<p>IE7&#8212;&#8211;字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。</p>
<p><img class="aligncenter size-full wp-image-621" title="ie7-f13-lh-21" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie7-f13-lh-21.png" alt="ie7-f13-lh-21" width="367" height="349" /></p>
<p>IE8&#8212;&#8211;字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。</p>
<p><img class="aligncenter size-full wp-image-622" title="ie8-f13-lh-21" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/ie8-f13-lh-21.png" alt="ie8-f13-lh-21" width="337" height="349" /></p>
<p>7.第七种情况，字体为tahoma，设置line-height:12px; font-size:20px。</p>
<p>在这种字体下字体的实际高度为12px，上留白为2px，下留白为4px，上下所占空间为18px。</p>
<p><img class="aligncenter size-full wp-image-618" title="tahoma" src="http://www.cnscorpio.cn/wp-content/uploads/2009/06/tahoma.png" alt="tahoma" width="390" height="55" /></p>
<p>总于到[貌似不完全，不能一一测试所有字体和所有浏览器]总结了：</p>
<p>1.宋体下如果用px做为单位，且显示的字体为宋体，则，8px&lt;font-size&lt;18px时font-size(px) = 字体实际高度(px)+1px；font-size&lt;9px时font-size(px) = 字体实际高度(px)；font-size&gt;17px时font-size(px) = 字体实际高度(px)+2px。</p>
<p>2.宋体下如果用px做为单位，且显示的字体为宋体，line-height = 字体实际高度(px)+上留白(px)+下留白(px)</p>
<p>2.1  如果font-size为偶数，而line-height为偶数：</p>
<p>Firefox下: 下留白(px)-1px = 上留白(px)</p>
<p>IE6下: 下留白(px)-3px = 上留白(px)</p>
<p>IE7下: 下留白(px)-1px = 上留白(px)</p>
<p>IE8下: 下留白(px)-1px = 上留白(px)</p>
<p>2.2  如果font-size为偶数，而line-height为奇数：</p>
<p>Firefox下: 下留白(px)-2px = 上留白(px)</p>
<p>IE6下: 下留白(px)-2px = 上留白(px)</p>
<p>IE7下: 下留白(px) = 上留白(px)</p>
<p>IE8下: 下留白(px)-2px = 上留白(px)</p>
<p>2.3  如果font-size为奇数，而line-height为偶数：</p>
<p>Firefox下: 下留白(px)-2px = 上留白(px)</p>
<p>IE6下: 下留白(px)-2px = 上留白(px)</p>
<p>IE7下: 下留白(px) = 上留白(px)</p>
<p>IE8下: 下留白(px)-2px = 上留白(px)</p>
<p>2.4  如果font-size为奇数，而line-height为奇数：</p>
<p>Firefox下: 下留白(px)-1px = 上留白(px)</p>
<p>IE6下: 下留白(px)-3px = 上留白(px)</p>
<p>IE7下: 下留白(px )-1px(或2px，因IE7下，如果font-size小于12，字体实际高度跟font-size是相同的)= 上留白(px)</p>
<p>IE8下: 下留白(px)-1px = 上留白(px)</p>
<p>3.经过测试如果单位为px，英文的衬线字体arial实际高度为font-size值 &#8211; 1px，而非衬线字体tahoma的字体实际高度就为font-size值。</p>
<p>PS:另外关于line-height的其他知识可以看看mayer的：</p>
<p><a href="http://meyerweb.com/eric/css/inline-format.html">http://meyerweb.com/eric/css/inline-format.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/06/line-height-2/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>浮动和绝对定位的性能问题</title>
		<link>http://www.cnscorpio.cn/2009/05/float-vs-position/</link>
		<comments>http://www.cnscorpio.cn/2009/05/float-vs-position/#comments</comments>
		<pubDate>Mon, 25 May 2009 16:30:04 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=568</guid>
		<description><![CDATA[最近看到一个应聘的同学给出的样式文件，看到老多的position:absolute;我老皱眉头，不太爽，对于float和绝对定位的使用问题是应该注意一点的。否则会带来一些性能上的影响。 晚上闲着无聊，做了以下这个无聊的实验，虽说不是很严谨，例如没有考虑硬件和操作系统的因素，但也多少能说明一些问题。 实验环境和条件： 1.firefox 3.0+firebug [经过测试其他浏览器的测试结果大同小异] 2.为了排除网络带来的影响，在本机搭建了服务器 3.每个例子运行19次，取得出的结果的平均值 场景： default页面:第一个页面中显示 13829 个div,不进行任何的浮动和定位等操作，默认。 float页面:第二个页面中显示一样的 13829 个div，对他们进行float:left;。 position:absolute页面 :第三个页面中同样显示 13829 个div，对他们进行绝对定位操作。 例如float的页面： 每个页面运行19次，用firebug查看运行完成所用时间，记录后分别求平均值进行对比。 最终得出以下的数据： 最后，默认状态下的平均渲染时间大约是：0.69秒。 浮动后的平均渲染时间是：29秒。 而绝对定位的平均渲染时间是：4.2秒。 浮动和绝对定位都会将此元素拖出文档流，这个就给浏览器渲染时带来负担，如果过量的使用，将会产生极大的性能问题。 而float又比绝对定位的效率更低一些。 ps:不知道有用没用，睡觉了]]></description>
			<content:encoded><![CDATA[<p>最近看到一个应聘的同学给出的样式文件，看到老多的position:absolute;我老皱眉头，不太爽，对于float和绝对定位的使用问题是应该注意一点的。否则会带来一些性能上的影响。</p>
<p>晚上闲着无聊，做了以下这个无聊的实验，虽说不是很严谨，例如没有考虑硬件和操作系统的因素，但也多少能说明一些问题。</p>
<p>实验环境和条件：</p>
<p>1.firefox 3.0+firebug [经过测试其他浏览器的测试结果大同小异]</p>
<p>2.为了排除网络带来的影响，在本机搭建了服务器</p>
<p>3.每个例子运行19次，取得出的结果的平均值</p>
<p>场景：</p>
<p>default页面:第一个页面中显示 13829 个div,不进行任何的浮动和定位等操作，默认。</p>
<p>float页面:第二个页面中显示一样的 13829 个div，对他们进行float:left;。</p>
<p>position:absolute页面 :第三个页面中同样显示 13829 个div，对他们进行绝对定位操作。</p>
<p>例如float的页面：</p>
<p><img class="aligncenter size-full wp-image-571" title="float" src="http://www.cnscorpio.cn/wp-content/uploads/2009/05/float.png" alt="float" width="600" height="240" /></p>
<p>每个页面运行19次，用firebug查看运行完成所用时间，记录后分别求平均值进行对比。</p>
<p><span id="more-568"></span></p>
<p>最终得出以下的数据：</p>
<p><img class="aligncenter size-full wp-image-569" title="exl" src="http://www.cnscorpio.cn/wp-content/uploads/2009/05/exl.gif" alt="exl" width="435" height="399" /></p>
<p>最后，默认状态下的平均渲染时间大约是：0.69秒。</p>
<p>浮动后的平均渲染时间是：29秒。</p>
<p>而绝对定位的平均渲染时间是：4.2秒。</p>
<p><img class="aligncenter size-full wp-image-570" title="anal" src="http://www.cnscorpio.cn/wp-content/uploads/2009/05/anal.png" alt="anal" width="600" height="327" /></p>
<p>浮动和绝对定位都会将此元素拖出文档流，这个就给浏览器渲染时带来负担，如果过量的使用，将会产生极大的性能问题。</p>
<p>而float又比绝对定位的效率更低一些。</p>
<p>ps:不知道有用没用，睡觉了</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/05/float-vs-position/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>HTML邮件的又一点思考</title>
		<link>http://www.cnscorpio.cn/2009/04/html-mail-2/</link>
		<comments>http://www.cnscorpio.cn/2009/04/html-mail-2/#comments</comments>
		<pubDate>Tue, 28 Apr 2009 13:34:37 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[UE]]></category>
		<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=507</guid>
		<description><![CDATA[要做好一个HTML邮件，说简单，还真不怎么复杂，说它复杂，其实也不难。-_-!! 以前写过类似的关于HTML邮件的总结，最近又犯愁，就再唠叨几句。 简单的是：技术实现要求不是太高，只要做好xhtml页面就能使用邮件发送服务来发送。 难的是：如要做到兼容国内几乎所有邮箱，兼容Gmail，Yahoo mail，outlook等，却也有点难度。因为各大邮箱对css，HTML标签的支持程度各不相同，有的会在邮件主体的外层使用一些干扰的样式，有的对图片的支持也不清不楚，邮件客户端就更是千奇百怪。 要想做好最大的兼容性，建议： 1.用table进行布局，想要布局不乱，尽量用他，很多时候web标准在这里行不通，想用float？到了人家的邮箱里，就不一定浮的起来了。。 2.少用图片作为背景，因为outlook 2007和某些web 邮箱是不支持背景图片的。 3.图片给出alt属性，防止图片无法显示时，出现红叉叉。 其他的，请参考上面给出的总结，业界也有不少关于这个话题的好帖子，可以搜索一下。 现在，再谈谈如何在HTML邮件上做一点点用研，提高它的回报率。 首先，有一条是必须的：你所发出的邮件对用户来说，是确实有意义的，而不是在糟蹋广大劳动人民的智慧。 1.  它面向的用户群体主要是某站点的会员，包括购买了产品的用户和没有购买产品的用户，没有购买产品的用户又包含活跃会员与普通用户，往下还可以细分。与用户的沟通，或者说互动，有很多的途径，HTML邮件就是其中之一，[ 虽然我极不推荐用这个古老而收效甚微的方法，其他的方式，往后再聊聊] ，它以精准而著称，如果接受者不是我们的有效目标受众，不但浪费了资源，更违背了HTML邮件或者叫EDM的宗旨及意义。这一点是首先要明确的。 2.  我们来看看这个小用研的重点在哪？先模拟一下用户打开邮件的整个过程： A、B、C三个点可以说都是关键点，因为这三个点是一个用户真正做决定的点，但是，其中的A是一个EDM能否产生真正应用价值的，是否有存活在这个世界上的时间点。这个地方需要考虑的是标题的创新包装，所以A是这三个点中，最重要的。 B点是视觉风格&#8211;&#62;内容的天地，也是用户是否会深入了解该邮件的过程。 C点是真正对用户产生价值的地方，是能否给用户带来效益的地方，也是友商网与用户能否双赢的时间段。这一次的用户调研，将主要在这三个点设计调研点。 剩下的，就是控制好样本量和选取合适的调研方法，可以是问卷，访谈，Focus group，可用性实验室等，最简单的，就是问卷和访谈。访谈，可以是真实的面对面的，也可以是通过语音。我们此次的调研主要采用的就是上面提到的前两种，效果还算理想。 本文同发KDUED，如果本blog不行显示不了图片，[ 可以移步到这里 ]。]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-509 aligncenter" title="mail" src="http://www.cnscorpio.cn/wp-content/uploads/2009/04/mail.png" alt="mail" width="350" height="350" /></p>
<p>要做好一个HTML邮件，说简单，还真不怎么复杂，说它复杂，其实也不难。-_-!!</p>
<p>以前写过类似的<a href="http://www.kdued.com/2009/01/html-mail/" target="_blank">关于HTML邮件的总结</a>，最近又犯愁，就再唠叨几句。</p>
<p>简单的是：技术实现要求不是太高，只要做好xhtml页面就能使用邮件发送服务来发送。</p>
<p>难的是：如要做到兼容国内几乎所有邮箱，兼容Gmail，Yahoo mail，outlook等，却也有点难度。因为各大邮箱对css，HTML标签的支持程度各不相同，有的会在邮件主体的外层使用一些干扰的样式，有的对图片的支持也不清不楚，邮件客户端就更是千奇百怪。</p>
<p><span id="more-507"></span></p>
<p>要想做好最大的兼容性，建议：</p>
<p>1.用table进行布局，想要布局不乱，尽量用他，很多时候web标准在这里行不通，想用float？到了人家的邮箱里，就不一定浮的起来了。。</p>
<p>2.少用图片作为背景，因为outlook 2007和某些web 邮箱是不支持背景图片的。</p>
<p>3.图片给出alt属性，防止图片无法显示时，出现红叉叉。</p>
<p>其他的，请参考上面给出的总结，业界也有不少关于这个话题的好帖子，可以搜索一下。</p>
<p>现在，再谈谈如何在HTML邮件上做一点点用研，提高它的回报率。</p>
<p>首先，有一条是必须的：<strong>你所发出的邮件对用户来说，是确实有意义的，而不是在糟蹋广大劳动人民的智慧</strong>。</p>
<p>1.  它面向的用户群体主要是某站点的会员，包括购买了产品的用户和没有购买产品的用户，没有购买产品的用户又包含活跃会员与普通用户，往下还可以细分。与用户的沟通，或者说互动，有很多的途径，HTML邮件就是其中之一，[ 虽然我极不推荐用这个古老而收效甚微的方法，其他的方式，往后再聊聊] ，它以精准而著称，如果接受者不是我们的有效目标受众，不但浪费了资源，更违背了HTML邮件或者叫EDM的宗旨及意义。这一点是首先要明确的。</p>
<p>2.  我们来看看这个小用研的重点在哪？先模拟一下用户打开邮件的整个过程：</p>
<p style="text-align: center;"><img class="size-full wp-image-508 aligncenter" title="flow" src="http://www.cnscorpio.cn/wp-content/uploads/2009/04/flow.png" alt="flow" width="543" height="599" /></p>
<p style="text-align: left;"><strong>A、B、C</strong>三个点可以说都是关键点，因为这三个点是一个用户真正做决定的点，但是，其中的<strong>A</strong>是一个EDM能否产生真正应用价值的，是否有存活在这个世界上的时间点。这个地方需要考虑的是标题的创新包装，所以<strong>A是这三个点中，最重要的</strong>。<br />
<strong>B</strong>点是视觉风格&#8211;&gt;内容的天地，也是用户是否会深入了解该邮件的过程。<br />
<strong>C</strong>点是真正对用户产生价值的地方，是能否给用户带来效益的地方，也是友商网与用户能否双赢的时间段。这一次的用户调研，将主要在这三个点设计调研点。</p>
<p style="text-align: left;">剩下的，就是控制好样本量和选取合适的调研方法，可以是问卷，访谈，Focus group，可用性实验室等，最简单的，就是问卷和访谈。访谈，可以是真实的面对面的，也可以是通过语音。我们此次的调研主要采用的就是上面提到的前两种，效果还算理想。</p>
<p style="text-align: left;">本文同发KDUED，如果本blog不行显示不了图片，[<a href="http://www.kdued.com/2009/04/html-mail-2/" target="_blank"> 可以移步到这里 </a>]。</p>
<p style="text-align: left;">
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/04/html-mail-2/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>IE8开始进行大面积推送</title>
		<link>http://www.cnscorpio.cn/2009/04/prepare-for-automatic-update-distribution-of-ie8/</link>
		<comments>http://www.cnscorpio.cn/2009/04/prepare-for-automatic-update-distribution-of-ie8/#comments</comments>
		<pubDate>Tue, 14 Apr 2009 13:38:45 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=477</guid>
		<description><![CDATA[和之前所提的情况一样，这个月，微软开始准备通过windows update推送IE8，而使用beta版本的用户也会收到“骚扰”，提示升级到正式版本。这个消息是好消息，也是坏消息。 最近IE Blog放出了即将自动推送的消息，看最后给出的连接。 好消息是：如果IE8得到广大人民群众的认可，那么就会加速IE6的“死亡”，这对用户来说，意味着将能得到更好的浏览器体验，而不会因为IE6的落后而受制。对开发者来说，意味着慢慢的，将不需要再测试针对IE6的兼容性，而更多高级的浏览器效果和功能也能得到使用。 坏消息是：各大站点将需要更注意对IE8的兼容问题了，如果大量的用户得到推送后接受更新，那么IE8的访问量比例将不断攀高。站点也要适当的添加针对IE8新功能[Webslices 和 Activity]的支持。 对于如何做好兼容性工作，可以参考之前的帖子： 1.IE8 —-中国？还是索马里？ 或 2. IE8 —-和谐？还是混乱？ IE Blog:Prepare for Automatic Update distribution of IE8]]></description>
			<content:encoded><![CDATA[<p>和之前所提的情况一样，这个月，微软开始准备通过windows update推送IE8，而使用beta版本的用户也会收到“骚扰”，提示升级到正式版本。这个消息是好消息，也是坏消息。</p>
<p>最近IE Blog放出了即将自动推送的消息，看最后给出的连接。</p>
<p>好消息是：如果IE8得到广大人民群众的认可，那么就会加速IE6的“死亡”，这对用户来说，意味着将能得到更好的浏览器体验，而不会因为IE6的落后而受制。对开发者来说，意味着慢慢的，将不需要再测试针对IE6的兼容性，而更多高级的浏览器效果和功能也能得到使用。</p>
<p>坏消息是：各大站点将需要更注意对IE8的兼容问题了，如果大量的用户得到推送后接受更新，那么IE8的访问量比例将不断攀高。站点也要适当的添加针对IE8新功能[Webslices 和 Activity]的支持。</p>
<p><span id="more-477"></span></p>
<p>对于如何做好兼容性工作，可以参考之前的帖子：</p>
<p><a href="../2009/02/ie8-chinaor-somalia/">1.IE8 —-中国？还是索马里？</a></p>
<p>或</p>
<p>2. <a rel="bookmark" href="http://www.kdued.com/2009/02/ie8-china%ef%bc%9for-somalia%ef%bc%9f/">IE8 —-和谐？还是混乱？</a></p>
<p style="text-align: center;">
<p style="text-align: center;"><img class="size-full wp-image-478 aligncenter" title="wuwelcomevista" src="http://www.cnscorpio.cn/wp-content/uploads/2009/04/wuwelcomevista.jpg" alt="wuwelcomevista" width="621" height="461" /></p>
<p style="text-align: left;">IE Blog:<a href="http://blogs.msdn.com/ie/archive/2009/04/10/prepare-for-automatic-update-distribution-of-ie8.aspx" target="_blank">Prepare for Automatic Update distribution of IE8</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/04/prepare-for-automatic-update-distribution-of-ie8/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>IE8正式版凌晨发布</title>
		<link>http://www.cnscorpio.cn/2009/03/ie8/</link>
		<comments>http://www.cnscorpio.cn/2009/03/ie8/#comments</comments>
		<pubDate>Thu, 19 Mar 2009 23:42:34 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://www.cnscorpio.cn/?p=421</guid>
		<description><![CDATA[微软在今天凌晨发布了IE8的正式版，简体中文版在第一批，在发布会上，微软还联合主要的合作伙伴eBay、Digg、Facebook进行了新浏览器解决方案的演示。 IE8正式版提供了新的Activity 和 Web slices新功能，在本blog能够体验到。另外，IE8号称为了兼容CSS2.1，为了向标准迈进更大的步伐，仅仅去年就向W3C组织递交了7000多次CSS 2.1 测试，这个态度多少说明了点什么，哈哈，新版本也提供了面向web前端开发的IE调试工具，能够调试HTML、CSS和JavaScript，这个工具的确非常实用，虽然很多地方类似firebug，但也说明微软着实为民造福了。 至于IE8能否流行，还要看微软的市场运作和营销策略，不过从以往经验来看，肯定会强推 ，IE6、7的不尽人意，也许会促成用户体验更好的、性能要更优越的IE8的全面升级换代。 IE8正式版下载地址：http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx 新浪专题：http://tech.sina.com.cn/s/focus/Microsoft_IE8/ 关于IE8的性能：http://www.cnbeta.com/articles/79781.htm]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-424 aligncenter" title="ie8" src="http://www.cnscorpio.cn/wp-content/uploads/2009/03/ie8.png" alt="ie8" width="575" height="280" /></p>
<p>微软在今天凌晨发布了IE8的正式版，简体中文版在第一批，在发布会上，微软还联合主要的合作伙伴eBay、Digg、Facebook进行了新浏览器解决方案的演示。</p>
<p>IE8正式版提供了新的Activity 和 Web slices新功能，在本blog能够体验到。另外，IE8号称为了兼容CSS2.1，为了向标准迈进更大的步伐，仅仅去年就向W3C组织递交了7000多次CSS 2.1 测试，这个态度多少说明了点什么，哈哈，新版本也提供了面向web前端开发的IE调试工具，能够调试HTML、CSS和JavaScript，这个工具的确非常实用，虽然很多地方类似firebug，但也说明微软着实为民造福了。</p>
<p>至于IE8能否流行，还要看微软的市场运作和营销策略，不过从以往经验来看，肯定会强推 ，IE6、7的不尽人意，也许会促成用户体验更好的、性能要更优越的IE8的全面升级换代。</p>
<p>IE8正式版下载地址：<a href="http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx">http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx</a></p>
<p>新浪专题：<a href="http://tech.sina.com.cn/s/focus/Microsoft_IE8/">http://tech.sina.com.cn/s/focus/Microsoft_IE8/</a></p>
<p>关于IE8的性能：<a href="http://www.cnbeta.com/articles/79781.htm">http://www.cnbeta.com/articles/79781.htm</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnscorpio.cn/2009/03/ie8/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
