<?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>反正乱拨 &#187; CSS</title>
	<atom:link href="http://swayweb.com/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://swayweb.com</link>
	<description>Sway的官方博客</description>
	<lastBuildDate>Mon, 19 Jul 2010 12:54:08 +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>1px Dotted Border Bug In Chrome3.0</title>
		<link>http://swayweb.com/tech/1389</link>
		<comments>http://swayweb.com/tech/1389#comments</comments>
		<pubDate>Tue, 08 Dec 2009 06:52:41 +0000</pubDate>
		<dc:creator>Sway</dc:creator>
				<category><![CDATA[老技术]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://swayweb.com/?p=1389</guid>
		<description><![CDATA[这是一个关于浏览器对CSS属性border的解析问题。在IE6下，当把边框(border-width)设置为1像素并且边框样式(border-style)设置为dotted时，IE6通常会渲染成虚线(dashed)而不是我们想要的点线(dotted)，这就是古老的1px Dotted Border Bug In Internet Explorer 6，好消息是在IE6以后的版本里修复了这个bug。 然而最近做测试时发现，以上提到的IE6的bug很不幸地转移到了Chrome上，具体现象是：在Chrome3.0下，当把边框(border-width)设置为1像素并且边框样式(border-style)设置为dotted时，无论长短，线段中部都会有一段实线，只有当border-width大于1px时才正常，很奇怪；补充一点，同样使用WebKit引擎的Safari3.2并不存在这个错误。 本人的测试环境：操作系统是WinXp Pro，屏幕分辨率是1280&#215;800，浏览器是Chrome3.0.195.33。我在想，这难道是Chrome的一个渲染bug？模仿IE，先称此bug为1px Dotted Border Bug In Chrome3。 测试页面(Test Page)]]></description>
			<content:encoded><![CDATA[<p>这是一个关于浏览器对CSS属性border的解析问题。在IE6下，当把边框(border-width)设置为1像素并且边框样式(border-style)设置为dotted时，IE6通常会渲染成虚线(dashed)而不是我们想要的点线(dotted)，这就是古老的1px Dotted Border Bug In Internet Explorer 6，好消息是在IE6以后的版本里修复了这个bug。</p>
<p>然而最近做测试时发现，以上提到的IE6的bug很不幸地转移到了Chrome上，具体现象是：在Chrome3.0下，当把边框(border-width)设置为1像素并且边框样式(border-style)设置为dotted时，无论长短，线段中部都会有一段实线，只有当border-width大于1px时才正常，很奇怪；补充一点，同样使用WebKit引擎的Safari3.2并不存在这个错误。</p>
<p>本人的测试环境：操作系统是WinXp Pro，屏幕分辨率是1280&#215;800，浏览器是Chrome3.0.195.33。我在想，这难道是Chrome的一个渲染bug？模仿IE，先称此bug为1px Dotted Border Bug In Chrome3。</p>
<p><a href="http://swayweb.com/studyfiles/css/chrome3-1px-dotted-bug.html" target="_blank">测试页面(Test Page)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://swayweb.com/tech/1389/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>自定义“饭否添加到个人博客”</title>
		<link>http://swayweb.com/tech/1115</link>
		<comments>http://swayweb.com/tech/1115#comments</comments>
		<pubDate>Thu, 28 May 2009 14:57:58 +0000</pubDate>
		<dc:creator>Sway</dc:creator>
				<category><![CDATA[老技术]]></category>
		<category><![CDATA[博客]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://swayweb.com/?p=1115</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;前几天用饭否的你可以把饭否添加到你的博客功能把饭否添加到了自己的博客，饭否有三种可选样式，分别是Flash插件版、图片插件版、JS插件版，就我所知，有很多BSP并不支持JS插件版，如网易博客、Blogbus、新浪博客等，有些是可以支持的，如Google的Blogger（基本上在大陆被封），而独立博客不出意外都应该是可以的。 &#160;&#160;&#160;&#160; Flash插件版和图片插件版虽然看上去很炫，但一则其自定义很差，二则Flash、图片这些都是些浪费带宽的主儿，影响访问速度。所以我个人选择了JS插件版，因为它相对简单，代码页清晰，传输的也仅仅是纯文本，不耗带宽。但用起来着实简单过头，白纸黑字，实在是不好看。 &#160;&#160;&#160;&#160;经过用Firebug分析其显示，虽然饭否生成的信息文字被包裹在一个叫&#60;div id=&#8221;fanfou_statuses_user用户名&#8220; class=&#8221;fanfou_statuses&#8220;&#62;的&#60;div&#62;里面，但其实这个div中的id和class根本就不起任何作用，因为我们的博客服务器上的CSS文件本来就没有定义这些id和class，但以上提到的id和class名又是通过引入的JS动态生成的，没法改，所以我们只需要在自己博客的相关CSS文件中定义（重写）一个名字叫“fanfou_statuses”的类就搞定了。类“fanfou_statuses”中的li的显示效果，同样可以通过 “.fanfou_statuses li {…………}”重写，要什么效果就是你自己的事了。 &#160;&#160;&#160;&#160;最后说一句，以上方法是针对独立博客，BSP托管的好像还不能自己重定义CSS。]]></description>
			<content:encoded><![CDATA[<p>&nbsp;&nbsp;&nbsp;&nbsp;前几天用<a title="饭否" href="http://fanfou.com">饭否</a>的<span class="hint"><a href="http://fanfou.com/badge">你可以把饭否添加到你的博客</a>功能把</span><a title="饭否" href="http://fanfou.com">饭否</a><span class="hint">添加到了自己的博客，</span><a title="饭否" href="http://fanfou.com">饭否</a><span class="hint">有三种可选样式，分别是Flash插件版、图片插件版、JS插件版，就我所知，有很多BSP并不支持JS插件版，如<a title="网易博客" href="http://blog.163.com">网易博客</a>、<a title="博客大巴" href="http://www.blogbus.com">Blogbus</a>、<a title="新浪博客" href="http://blog.sina.com.cn">新浪博客</a>等，有些是可以支持的，如Google的<a href="http://www.blogger.com">Blogger</a>（基本上在大陆被封），而独立博客不出意外都应该是可以的。</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<span class="hint"> Flash插件版和图片插件版虽然看上去很炫，但一则其自定义很差，二则Flash、图片这些都是些浪费带宽的主儿，影响访问速度。所以我个人选择了JS插件版，因为它相对简单，代码页清晰，传输的也仅仅是纯文本，不耗带宽。但用起来着实简单过头，白纸黑字，实在是不好看。</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;经过用Firebug分析其显示，虽然饭否生成的信息文字被包裹在一个叫<span class="nodeLabelBox repTarget">&lt;<span class="nodeTag">div</span><span class="nodeAttr editGroup"> <span class="nodeName editable">id</span>=&#8221;<span class="nodeValue editable">fanfou_statuses_user用户名</span>&#8220;</span><span class="nodeAttr editGroup"> <span class="nodeName editable">class</span>=&#8221;<span class="nodeValue editable">fanfou_statuses</span>&#8220;</span><span class="nodeBracket editable insertBefore">&gt;</span></span>的&lt;div&gt;里面，但其实这个div中的id和class根本就不起任何作用，因为我们的博客服务器上的CSS文件本来就没有定义这些id和class，但以上提到的id和class名又是通过引入的JS动态生成的，没法改，所以我们只需要在自己博客的相关CSS文件中定义（重写）一个名字叫“<span class="nodeLabelBox repTarget"><span class="nodeAttr editGroup"><span class="nodeValue editable">fanfou_statuses”的类就搞定了。类</span></span></span>“<span class="nodeLabelBox repTarget"><span class="nodeAttr editGroup"><span class="nodeValue editable">fanfou_statuses”中的</span></span></span><span class="nodeLabelBox repTarget"><span class="nodeAttr editGroup"><span class="nodeValue editable">li的显示效果，同样可以通过 </span></span></span>“.<span class="nodeLabelBox repTarget"><span class="nodeAttr editGroup"><span class="nodeValue editable">fanfou_statuses li {…………}”重写，要什么效果就是你自己的事了。</span></span></span></p>
<p><span class="nodeLabelBox repTarget"><span class="nodeAttr editGroup"><span class="nodeValue editable"> &nbsp;&nbsp;&nbsp;&nbsp;最后说一句，以上方法是针对独立博客，BSP托管的好像还不能自己重定义CSS。<br />
</span></span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://swayweb.com/tech/1115/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>关于IE和Firefox对Html引入外部文件的探查</title>
		<link>http://swayweb.com/tech/1082</link>
		<comments>http://swayweb.com/tech/1082#comments</comments>
		<pubDate>Sun, 24 May 2009 13:49:33 +0000</pubDate>
		<dc:creator>Sway</dc:creator>
				<category><![CDATA[老技术]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Ext]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://swayweb.com/image/1082</guid>
		<description><![CDATA[前几天在学习Ext的时候，刚第一步就卡壳了，长时间连HelloWorld都没哈出来，好让我不郁闷。 情况：我把Ext的库解压缩放在F盘下的某个文件夹，然后在E盘某个文件夹下新建Html页面，并通过动态引入F盘下的Ext所需文件，准备实现个Helloworld，结果IE下成功了，Firefox下死活不行，至始至终报Function not defined。你说我没定义函数或路径错误吧，人家IE却找到了，所以我当时在想：难道是针对Firefox还需要引入别的其他Ext文件支持，这也太弱智了吧（Ext）。所以当时猜想会不会是Firefox不能识别跨盘路径，今天，花了本人宝贵的时间，终于得出结论了： Firefox不是不支持跨盘路径，而是管你跨不跨盘，它根本就不支持带盘符的绝对路径名，例如“E:\folder1\folder2\test.js”是引入不了的，而以上这些在IE下都不是问题。 同样，经我测试，对于CSS文件的引入Firefox也存在这样的问题。 以上结论，本人并不能给出官方解释，而是通过实践得出的。有时候，实践还是可以得出些真理的。当然信不信有你。]]></description>
			<content:encoded><![CDATA[<p>前几天在学习Ext的时候，刚第一步就卡壳了，长时间连HelloWorld都没哈出来，好让我不郁闷。</p>
<p>情况：我把Ext的库解压缩放在F盘下的某个文件夹，然后在E盘某个文件夹下新建Html页面，并通过动态引入F盘下的Ext所需文件，准备实现个Helloworld，结果IE下成功了，Firefox下死活不行，至始至终报Function not defined。你说我没定义函数或路径错误吧，人家IE却找到了，所以我当时在想：难道是针对Firefox还需要引入别的其他Ext文件支持，这也太弱智了吧（Ext）。所以当时猜想会不会是Firefox不能识别跨盘路径，今天，花了本人宝贵的时间，终于得出结论了：<br />
Firefox不是不支持跨盘路径，而是管你跨不跨盘，它根本就不支持带盘符的绝对路径名，例如“E:\folder1\folder2\test.js”是引入不了的，而以上这些在IE下都不是问题。<br />
同样，经我测试，对于CSS文件的引入Firefox也存在这样的问题。</p>
<p>以上结论，本人并不能给出官方解释，而是通过实践得出的。有时候，实践还是可以得出些真理的。当然信不信有你。</p>
]]></content:encoded>
			<wfw:commentRss>http://swayweb.com/tech/1082/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
