<?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; 乱七八糟</title>
	<atom:link href="http://ofcss.com/category/uncategoried/feed" rel="self" type="application/rss+xml" />
	<link>http://ofcss.com</link>
	<description>独立 自由 诚信 宽容 责任 平常心</description>
	<lastBuildDate>Fri, 20 Apr 2012 04:08:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>禁用Firefox自带的元素查看工具</title>
		<link>http://ofcss.com/2012/03/30/disable-firefox-built-in-inspector.html</link>
		<comments>http://ofcss.com/2012/03/30/disable-firefox-built-in-inspector.html#comments</comments>
		<pubDate>Thu, 29 Mar 2012 17:45:03 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[tool]]></category>
		<category><![CDATA[技巧]]></category>
		<category><![CDATA[浏览器]]></category>
		<category><![CDATA[火狐]]></category>

		<guid isPermaLink="false">http://ofcss.com/?p=1226</guid>
		<description><![CDATA[对于web前端工程师来说，用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今，新版本的Firefox中又内嵌了一个元素查看工具（图1），类似Firebug，但是初步体验下来，功能远不如Firebug（图2），使用起来也远不如Firebug方便。但是右键菜单中的两个“查看元素”选项（图3），常常一不小心就按错了。这个新增的内置元素查看工具，不但没有给我带来便利，反而造成了许多不便。幸好，我们可以轻松地禁用它。 禁用新版Firefox自带的元素查看器的方法很简单（图4）： 在地址栏输入 about:config，回车 提示“这样可能会失去质保”，点击“我保证会小心” 进入Firefox配置界面后，可以在搜索框中输入 inspector ，过滤无关的项目 双击“devtools.inspector.enabled”，使其值变为“false”。 图1：firebox内置的元素查看器，可以查看HTML、CSS 图2：功能更强大、更易用的Firebug界面 图3：右键菜单里多出一个查看元素，经常会点错 图4：通过about:config高级配置，可以轻松禁用Firefox自带的元素查看器 相关日志2011-03-07 -- IE8/9兼容性设置2011-03-20 -- 容易被误解的overflow:hidden2011-03-12 -- 自适应的多列图文混排改进2011-03-10 -- CSS边框实现&#8220;无图化&#8221;设计【译】2010-10-31 -- CSS技巧:如何避免IE6中的&#34;浮动下坠&#34;【译】2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug2010-10-10 -- 卸载360安全卫士造成网络异常问题解决方案2009-06-20 -- 工行U盾在Windows 7 x64版下的使用2009-06-17 -- Dreamweaver中的正则表达式2009-05-23 -- windows 7 x64 上的Google Chrome]]></description>
			<content:encoded><![CDATA[<p>对于web前端工程师来说，用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今，新版本的Firefox中又内嵌了一个元素查看工具（图1），类似Firebug，但是初步体验下来，功能远不如Firebug（图2），使用起来也远不如Firebug方便。但是右键菜单中的两个“查看元素”选项（图3），常常一不小心就按错了。这个新增的内置元素查看工具，不但没有给我带来便利，反而造成了许多不便。幸好，我们可以轻松地禁用它。</p>
<p><span id="more-1226"></span></p>
<p>禁用新版Firefox自带的元素查看器的方法很简单（图4）：</p>
<ol>
<li>在地址栏输入 <span style="color: #3366ff;"><strong>about:config</strong></span>，回车</li>
<li>提示“这样可能会失去质保”，点击“我保证会小心”</li>
<li>进入Firefox配置界面后，可以在搜索框中输入 <strong><span style="color: #3366ff;">inspector</span></strong> ，过滤无关的项目</li>
<li>双击“devtools.inspector.enabled”，使其值变为“false”。</li>
</ol>
<p><img class="alignnone" title="新版Firefox内置元素查看工具" src="http://file.wukangrui.com/blog/ff-inspector.png" alt="Firefox built-in inspector" width="600" height="539" /><span style="color: #999999;"><br />
图1：firebox内置的元素查看器，可以查看HTML、CSS</span></p>
<p><img class="alignnone" title="Firebug插件的元素查看界面" src="http://file.wukangrui.com/blog/ff-firebug.png" alt="Firebug inspector" width="600" height="537" /><br />
<span style="color: #999999;">图2：功能更强大、更易用的Firebug界面</span></p>
<p><img class="alignnone" title="邮件菜单的两个选项带来了不变" src="http://file.wukangrui.com/blog/ff-menu.png" alt="Firefox context menu" width="591" height="390" /><br />
<span style="color: #999999;">图3：右键菜单里多出一个查看元素，经常会点错</span></p>
<p><img class="alignnone" title="在about:config高级配置中可以禁用自带元素查看器" src="http://file.wukangrui.com/blog/ff-config.png" alt="disable built-in inspector of firefox" width="500" height="186" /><br />
<span style="color: #999999;">图4：通过about:config高级配置，可以轻松禁用Firefox自带的元素查看器</span></p>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2011-03-07 -- <a href="http://ofcss.com/2011/03/07/ie8-compatibility-settings.html" title="IE8/9兼容性设置">IE8/9兼容性设置</a></li><li>2011-03-20 -- <a href="http://ofcss.com/2011/03/20/misunderstood-of-overflow-hidden.html" title="容易被误解的overflow:hidden">容易被误解的overflow:hidden</a></li><li>2011-03-12 -- <a href="http://ofcss.com/2011/03/12/flexible-two-column-layout-reloaded.html" title="自适应的多列图文混排改进">自适应的多列图文混排改进</a></li><li>2011-03-10 -- <a href="http://ofcss.com/2011/03/10/css-border-tricks-with-collapsed-boxes-translation.html" title="CSS边框实现&ldquo;无图化&rdquo;设计【译】">CSS边框实现&ldquo;无图化&rdquo;设计【译】</a></li><li>2010-10-31 -- <a href="http://ofcss.com/2010/10/31/prevent-a-float-drop-in-ie6-translation.html" title="CSS技巧:如何避免IE6中的&quot;浮动下坠&quot;【译】">CSS技巧:如何避免IE6中的&quot;浮动下坠&quot;【译】</a></li><li>2010-10-30 -- <a href="http://ofcss.com/2010/10/30/bfc-element-margin-bug-in-webkit.html" title="webkit中BFC元素临近浮动元素时的边距bug">webkit中BFC元素临近浮动元素时的边距bug</a></li><li>2010-10-10 -- <a href="http://ofcss.com/2010/10/10/360-network-monitor-driver-issue.html" title="卸载360安全卫士造成网络异常问题解决方案">卸载360安全卫士造成网络异常问题解决方案</a></li><li>2009-06-20 -- <a href="http://ofcss.com/2009/06/20/icbc-u-key-in-windows-7-x64.html" title="工行U盾在Windows 7 x64版下的使用">工行U盾在Windows 7 x64版下的使用</a></li><li>2009-06-17 -- <a href="http://ofcss.com/2009/06/17/regular-expression-in-dreamweaver.html" title="Dreamweaver中的正则表达式">Dreamweaver中的正则表达式</a></li><li>2009-05-23 -- <a href="http://ofcss.com/2009/05/23/google-chrome-in-windows7-x64.html" title="windows 7 x64 上的Google Chrome">windows 7 x64 上的Google Chrome</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2012/03/30/disable-firefox-built-in-inspector.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>腾讯ISUX招聘：前端工程师（深圳总部）</title>
		<link>http://ofcss.com/2011/06/28/1119.html</link>
		<comments>http://ofcss.com/2011/06/28/1119.html#comments</comments>
		<pubDate>Tue, 28 Jun 2011 02:29:09 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>

		<guid isPermaLink="false">http://ofcss.com/?p=1119</guid>
		<description><![CDATA[有意向的朋友可以直接发送简历到 kairee#qq.com，招聘详情见正文。 待遇： 富有竞争力的薪酬 丰厚年终绩效奖金 茶水间二十四小时供应饮品、休闲娱乐设施 免费宵夜供应 上下班市内多条线路班车接送 每年制订的成长培养计划 一年多次境内外旅游 五险一金 可能会令您不习惯的团队聚餐、腐败 职责 负责腾讯互联网业务系统相关web产品(QQ空间、QQ秀、数字多媒体、QQ会员、拍拍网等)海量平台前端研发；通过技术提升用户体验和可用性；突破web多终端/设备为更多用户群体提供随时随地的线上生活体验；通过无障碍研究/SEO提升产品的口碑和品牌受众…更多的定位等待您来下笔 要求 深刻理解Web标准；精通图像处理及代码编辑工具；精通Web前端跨平台开发技术（XHTML/XML/CSS/Javascript等）；及时了解业界前瞻信息及应用，并有浓厚的兴趣和深入的见解；对HTML5/CSS3方面有实际的理解和实践经验； 对互联网产品性能优化有研究并有相关实践经验； 熟悉搜索引擎优化，有相关的实践经验； 熟悉业界常用Javascript脚本库(如jQuery、YUI、mootools等)； 有团队协作精神，较强的逻辑分析能力、沟通表达能力，善于学习； 勇于探索新领域了解多终端平台(手机，打印机，视障阅读器)研发，对可用性等有实际的理解和实践经验； 对非Web前端脚本的语言（如Java/PHP/CGI）等有所了解，并在实际工作中接触过； 两年以上互联网产品研发经验，海量平台研发经验优先； 有Web Apps开发经验优先； 具备项目驱动力，对此有独特见解并有成功案例优先； 专科或以上学历优先 关于我们： 腾讯互联网用户体验设计部（前身： ISD webteam） 人在腾讯&#62;&#62; 有意向的朋友可以直接发送简历到 kairee#qq.com 随机推荐2007-11-12 -- 基金们，你们是否还记得自己是基金2009-06-28 -- ASP.NET MVC 最佳实践（一）2007-07-25 -- 信用卡啊信用卡2005-12-12 -- 实践：用Div+CSS重构网页2008-04-12 -- 新基金上市 多方要反攻了吗？2006-09-12 -- 朋友的奇遇2007-11-19 -- 如何在DreamHost主机上安装eAcceleartor支持[翻译]2010-10-25 -- 借助jQuery和Google分析服务的事件追踪深入了解用户行为【译】2007-03-01 -- [...]]]></description>
			<content:encoded><![CDATA[<p>有意向的朋友可以直接发送简历到 <strong>kairee<em>#</em>qq.com</strong>，招聘详情见正文。</p>
<p><span id="more-1119"></span></p>
<p><strong>待遇：</strong></p>
<ol>
<li>富有竞争力的薪酬</li>
<li>丰厚年终绩效奖金</li>
<li>茶水间二十四小时供应饮品、休闲娱乐设施</li>
<li>免费宵夜供应</li>
<li>上下班市内多条线路班车接送</li>
<li>每年制订的成长培养计划</li>
<li>一年多次境内外旅游</li>
<li>五险一金</li>
<li>可能会令您不习惯的团队聚餐、腐败</li>
</ol>
<dl>
<dt><strong>职责</strong></dt>
<dd>负责腾讯互联网业务系统相关web产品(QQ空间、QQ秀、数字多媒体、QQ会员、拍拍网等)海量平台前端研发；通过技术提升用户体验和可用性；突破web多终端/设备为更多用户群体提供随时随地的线上生活体验；通过无障碍研究/SEO提升产品的口碑和品牌受众…更多的定位等待您来下笔</p>
</dd>
<dt><strong>要求</strong></dt>
<dd>深刻理解Web标准；精通图像处理及代码编辑工具；精通Web前端跨平台开发技术（XHTML/XML/CSS/Javascript等）；及时了解业界前瞻信息及应用，并有浓厚的兴趣和深入的见解；对HTML5/CSS3方面有实际的理解和实践经验；</p>
<p>对互联网产品性能优化有研究并有相关实践经验；</p>
<p>熟悉搜索引擎优化，有相关的实践经验；</p>
<p>熟悉业界常用Javascript脚本库(如jQuery、YUI、mootools等)；</p>
<p>有团队协作精神，较强的逻辑分析能力、沟通表达能力，善于学习；</p>
<p>勇于探索新领域了解多终端平台(手机，打印机，视障阅读器)研发，对可用性等有实际的理解和实践经验；</p>
<p>对非Web前端脚本的语言（如Java/PHP/CGI）等有所了解，并在实际工作中接触过；</p>
<p>两年以上互联网产品研发经验，海量平台研发经验优先；</p>
<p>有Web Apps开发经验优先；</p>
<p>具备项目驱动力，对此有独特见解并有成功案例优先；</p>
<p>专科或以上学历优先</p>
</dd>
</dl>
<p><strong>关于我们：</strong></p>
<p><a href="http://isux.tencent.com/">腾讯互联网用户体验设计部</a>（前身： ISD webteam）</p>
<p><a href="http://hr.tencent.com/people.php">人在腾讯&gt;&gt;</a></p>
<p>有意向的朋友可以直接发送简历到 <strong>kairee<em>#</em>qq.com</strong></p>
<h3  class="related_post_title">随机推荐</h3><ul class="related_post"><li>2005-11-27 -- <a href="http://ofcss.com/2005/11/27/the-day-without-internet.html" title="被切断通讯的感觉">被切断通讯的感觉</a></li><li>2006-04-14 -- <a href="http://ofcss.com/2006/04/14/intergration-test-steps.html" title="整合后测试是否成功的全部步骤">整合后测试是否成功的全部步骤</a></li><li>2007-07-21 -- <a href="http://ofcss.com/2007/07/21/learn-drive.html" title="加油，再加，使劲加！">加油，再加，使劲加！</a></li><li>2006-10-25 -- <a href="http://ofcss.com/2006/10/25/pdo-api-files-and-user-synchro-updated.html" title="动易接口文件及数据同步工具更新">动易接口文件及数据同步工具更新</a></li><li>2005-11-23 -- <a href="http://ofcss.com/2005/11/23/compare-interge-with-string-in-asp.html" title="ASP中的数字和字符比较">ASP中的数字和字符比较</a></li><li>2011-03-07 -- <a href="http://ofcss.com/2011/03/07/ie8-compatibility-settings.html" title="IE8/9兼容性设置">IE8/9兼容性设置</a></li><li>2005-10-11 -- <a href="http://ofcss.com/2005/10/11/friend-in-sourthern.html" title="南方的朋友">南方的朋友</a></li><li>2006-09-17 -- <a href="http://ofcss.com/2006/09/17/wenshan-beijing-compare.html" title="回文山两个月后与北京对比">回文山两个月后与北京对比</a></li><li>2008-09-19 -- <a href="http://ofcss.com/2008/09/19/bug-about-search-engine-of-oblog.html" title="Oblog检测搜索引擎的一个问题">Oblog检测搜索引擎的一个问题</a></li><li>2010-10-22 -- <a href="http://ofcss.com/2010/10/22/the-value-of-html-validation-translation.html" title="HTML验证的价值探讨【译】">HTML验证的价值探讨【译】</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2011/06/28/1119.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>IE8/9兼容性设置</title>
		<link>http://ofcss.com/2011/03/07/ie8-compatibility-settings.html</link>
		<comments>http://ofcss.com/2011/03/07/ie8-compatibility-settings.html#comments</comments>
		<pubDate>Mon, 07 Mar 2011 02:02:43 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[技巧]]></category>
		<category><![CDATA[浏览器]]></category>
		<category><![CDATA[软件]]></category>

		<guid isPermaLink="false">http://ofcss.com/2011/03/07/ie8-compatibility-settings.html</guid>
		<description><![CDATA[从使用Win7测试版开始，经历了IE新版本使用中的不少兼容性问题，早期遇到的如看不了视频、论坛不能上传附件、不能使用网银、不能使用支付宝财付通等问题。经过一两年的使用下来，IE8已经成了我主要使用的浏览器之一（Chrome是我的默认浏览器、网银、支付宝、财付通及部分兼容性不好的网站用IE8），使用一直很顺畅。现在很多人开始升级IE9，希望会有更多的非前端开发人员的普通用户开始尝试IE8吧。这里把我安装完IE8（以及升级完IE9）之后必做的设置分享一下，希望能帮助一些刚开始使用IE8/9的朋友。 安装完IE8/9，第一次启动时会打开设置向导，设置不设置都可以。设置项中的基本项目说明一下： 启用选项卡浏览：这个必定启用，很多人不肯用IE而非要使用TT浏览器、遨游浏览器的主要原因是不用开启多个浏览器窗口，在一个窗口中就可以打开很多网页。实际上从IE7开始已经支持这个特性； 启用加速器：这个根据需要，我是全部禁止的，主要包括Bing地图、使用Bing搜索、使用Windows Live发送电子邮件、日志等功能，由于都有更佳的替代品，所以我不使用这些加速器，喜欢Bing的朋友可以启用。 SmartScreen筛选：针对仿冒网站的改良型保护功能，带有新的反恶意软件功能。原理是通过服务器端的特征对比识别你所访问的网站是否带有恶意软件、是否仿冒的钓鱼网站。我一直是禁用的，不过现在钓鱼网站很猖獗，如果你没办法确保自己能识别钓鱼网站，可以启用。具体效果我并不清楚，因为没有使用过。 搜索默认值：默认使用的是Bing搜索引擎，可以自由更改。IE7/8设置网站上的google默认地址是中国大陆谷歌的地址，由于google已经退出中国，每次搜索都会返回“查看xxxx在google.com.hk上的结果”，中转一次才能得到结果。这里可以使用自定义。首先打开google.com，搜索TEST，然后把结果页面的URL作为自定义搜索引擎的URL就可以了。 以上都是基本的设置，对浏览器的兼容性没有影响，下面说一下常用的兼容性设置： 关闭安全模式： 打开“Internet选项 -&#62; 安全”选项卡，取消勾选“启用安全模式”，这是造成IE8/9兼容性问题的主要原因。勾选之后，重新启动IE会在顶部出现安全模式已关闭的提示，点一下可以选择“不再提示”。 自定义级别： 打开“Internet选项 -&#62; 安全”选项卡（如上图），点击“自定义级别”，然后修改以下项目： “对未标记为可安全执行脚本的Active X控件初始化并执行脚本”：默认是“禁用”，改成“提示”（解决一些没有证书或证书的正规网站的ActiveX脚本无法提示和使用的问题）； “下载未签名的Active X控件”：默认是“禁用”，改成“提示”（同上）； “允许Scriptlet”：默认是“禁用，改成“提示”（纯粹为了向下兼容，现在使用Scriptlet的网站已经很少）； “在没有使用外部媒体播放机的网页上显示视频和动画”：默认是“禁用”，改成“启用”（解决部分网站的网页视频无法播放的问题）； “允许对剪贴板进行编程访问”：默认是“提示”，改成“启用”（解决每次在页面上点击复制、或点击“复制”按钮都会弹出提示框询问是否允许的问题）； “允许网站使用脚本窗口获得提示信息”：默认是“禁用”，改成“启用”（解决一些网站用js弹出框让你填信息的问题——比如云南信息港的聊天室）； “将文件上载到服务器时包含本地目录路径”：默认是“禁用”，改成“启用”（解决论坛不能上传附件的问题）； “显示混合内容”：默认是“提示”，改成启用（某些使用ssl的网页中包含有非ssl资源时就会提示，很麻烦）； &#160; 如果你是工行U盾的用户，那么在安装了工行U盾的驱动后，对浏览器安全性会做出修改，其中包括把我这里设置为“提示”的项目改成“启用”，大大增加了中流氓软件的几率，严重降低了IE安全性，实际上改成提示就可以了。当然，工行的网银很麻烦，经常是进了页面之后弹出ActiveX提示，等你同意之后，页面刷新又要你重新登录，登录之后又弹出提示……循环N次才可能正常使用，而工行U盾式的修改后，就可以正常使用。工行的行为属于典型的为了自己的方便损害用户的安全。能不用工行就别用了，招行的用户体验极佳。 相关日志2012-03-30 -- 禁用Firefox自带的元素查看工具2009-06-17 -- Dreamweaver中的正则表达式2011-03-20 -- 容易被误解的overflow:hidden2011-03-12 -- 自适应的多列图文混排改进2011-03-10 -- CSS边框实现&#8220;无图化&#8221;设计【译】2010-10-31 -- CSS技巧:如何避免IE6中的&#34;浮动下坠&#34;【译】2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug2010-10-10 -- 卸载360安全卫士造成网络异常问题解决方案2010-04-14 -- Visual Studio 2010 Ultimate RTM 版开放MSDN下载2009-06-20 -- 工行U盾在Windows 7 [...]]]></description>
			<content:encoded><![CDATA[<p><img style="margin: 0px 0px 10px 10px; display: inline; float: right;" src="http://file.wukangrui.com/attachments/2011/03/ie9-logo_thumb.png" alt="ie9-logo" />从使用Win7测试版开始，经历了IE新版本使用中的不少兼容性问题，早期遇到的如看不了视频、论坛不能上传附件、不能使用网银、不能使用支付宝财付通等问题。经过一两年的使用下来，IE8已经成了我主要使用的浏览器之一（Chrome是我的默认浏览器、网银、支付宝、财付通及部分兼容性不好的网站用IE8），使用一直很顺畅。现在很多人开始升级IE9，希望会有更多的非前端开发人员的普通用户开始尝试IE8吧。这里把我安装完IE8（以及升级完IE9）之后必做的设置分享一下，希望能帮助一些刚开始使用IE8/9的朋友。</p>
<p><span id="more-1065"></span></p>
<p>安装完IE8/9，第一次启动时会打开设置向导，设置不设置都可以。设置项中的基本项目说明一下：</p>
<ul>
<li>启用选项卡浏览：这个必定启用，很多人不肯用IE而非要使用TT浏览器、遨游浏览器的主要原因是不用开启多个浏览器窗口，在一个窗口中就可以打开很多网页。实际上从IE7开始已经支持这个特性；</li>
<li>启用加速器：这个根据需要，我是全部禁止的，主要包括Bing地图、使用Bing搜索、使用Windows Live发送电子邮件、日志等功能，由于都有更佳的替代品，所以我不使用这些加速器，喜欢Bing的朋友可以启用。</li>
<li>SmartScreen筛选：针对仿冒网站的改良型保护功能，带有新的反恶意软件功能。原理是通过服务器端的特征对比识别你所访问的网站是否带有恶意软件、是否仿冒的钓鱼网站。我一直是禁用的，不过现在钓鱼网站很猖獗，如果你没办法确保自己能识别钓鱼网站，可以启用。具体效果我并不清楚，因为没有使用过。</li>
<li>搜索默认值：默认使用的是Bing搜索引擎，可以自由更改。IE7/8设置网站上的google默认地址是中国大陆谷歌的地址，由于google已经退出中国，每次搜索都会返回“查看xxxx在google.com.hk上的结果”，中转一次才能得到结果。这里可以使用自定义。首先打开google.com，搜索TEST，然后把结果页面的URL作为自定义搜索引擎的URL就可以了。</li>
</ul>
<p>以上都是基本的设置，对浏览器的兼容性没有影响，下面说一下常用的兼容性设置：</p>
<h4>关闭安全模式：</h4>
<p>打开“Internet选项 -&gt; 安全”选项卡，取消勾选“启用安全模式”，这是造成IE8/9兼容性问题的主要原因。勾选之后，重新启动IE会在顶部出现安全模式已关闭的提示，点一下可以选择“不再提示”。</p>
<p><a href="http://file.wukangrui.com/attachments/2011/03/image.png"><img title="image" src="http://file.wukangrui.com/attachments/2011/03/image_thumb.png" border="0" alt="image" /></a></p>
<h4>自定义级别：</h4>
<p>打开“Internet选项 -&gt; 安全”选项卡（如上图），点击“自定义级别”，然后修改以下项目：</p>
<p>“<strong>对未标记为可安全执行脚本的Active X控件初始化并执行脚本</strong>”：默认是“禁用”，改成“<strong>提示</strong>”（解决一些没有证书或证书的正规网站的ActiveX脚本无法提示和使用的问题）；</p>
<p>“<strong>下载未签名的Active X控件</strong>”：默认是“禁用”，改成“<strong>提示</strong>”（同上）；</p>
<p>“<strong>允许Scriptlet</strong>”：默认是“禁用，改成“<strong>提示</strong>”（纯粹为了向下兼容，现在使用Scriptlet的网站已经很少）；</p>
<p>“<strong>在没有使用外部媒体播放机的网页上显示视频和动画</strong>”：默认是“禁用”，改成“<strong>启用</strong>”（解决部分网站的网页视频无法播放的问题）；</p>
<p>“<strong>允许对剪贴板进行编程访问</strong>”：默认是“提示”，改成“<strong>启用</strong>”（解决每次在页面上点击复制、或点击“复制”按钮都会弹出提示框询问是否允许的问题）；</p>
<p>“<strong>允许网站使用脚本窗口获得提示信息</strong>”：默认是“禁用”，改成“<strong>启用</strong>”（解决一些网站用js弹出框让你填信息的问题——比如云南信息港的聊天室）；</p>
<p>“<strong>将文件上载到服务器时包含本地目录路径</strong>”：默认是“禁用”，改成“<strong>启用</strong>”（解决论坛不能上传附件的问题）；</p>
<p>“<strong>显示混合内容</strong>”：默认是“<strong>提示</strong>”，改成启用（某些使用ssl的网页中包含有非ssl资源时就会提示，很麻烦）；</p>
<p>&nbsp;</p>
<p>如果你是工行U盾的用户，那么在安装了工行U盾的驱动后，对浏览器安全性会做出修改，其中包括把我这里设置为“提示”的项目改成“启用”，大大增加了中流氓软件的几率，严重降低了IE安全性，实际上改成提示就可以了。当然，工行的网银很麻烦，经常是进了页面之后弹出ActiveX提示，等你同意之后，页面刷新又要你重新登录，登录之后又弹出提示……循环N次才可能正常使用，而工行U盾式的修改后，就可以正常使用。工行的行为属于典型的为了自己的方便损害用户的安全。能不用工行就别用了，招行的用户体验极佳。</p>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2012-03-30 -- <a href="http://ofcss.com/2012/03/30/disable-firefox-built-in-inspector.html" title="禁用Firefox自带的元素查看工具">禁用Firefox自带的元素查看工具</a></li><li>2009-06-17 -- <a href="http://ofcss.com/2009/06/17/regular-expression-in-dreamweaver.html" title="Dreamweaver中的正则表达式">Dreamweaver中的正则表达式</a></li><li>2011-03-20 -- <a href="http://ofcss.com/2011/03/20/misunderstood-of-overflow-hidden.html" title="容易被误解的overflow:hidden">容易被误解的overflow:hidden</a></li><li>2011-03-12 -- <a href="http://ofcss.com/2011/03/12/flexible-two-column-layout-reloaded.html" title="自适应的多列图文混排改进">自适应的多列图文混排改进</a></li><li>2011-03-10 -- <a href="http://ofcss.com/2011/03/10/css-border-tricks-with-collapsed-boxes-translation.html" title="CSS边框实现&ldquo;无图化&rdquo;设计【译】">CSS边框实现&ldquo;无图化&rdquo;设计【译】</a></li><li>2010-10-31 -- <a href="http://ofcss.com/2010/10/31/prevent-a-float-drop-in-ie6-translation.html" title="CSS技巧:如何避免IE6中的&quot;浮动下坠&quot;【译】">CSS技巧:如何避免IE6中的&quot;浮动下坠&quot;【译】</a></li><li>2010-10-30 -- <a href="http://ofcss.com/2010/10/30/bfc-element-margin-bug-in-webkit.html" title="webkit中BFC元素临近浮动元素时的边距bug">webkit中BFC元素临近浮动元素时的边距bug</a></li><li>2010-10-10 -- <a href="http://ofcss.com/2010/10/10/360-network-monitor-driver-issue.html" title="卸载360安全卫士造成网络异常问题解决方案">卸载360安全卫士造成网络异常问题解决方案</a></li><li>2010-04-14 -- <a href="http://ofcss.com/2010/04/14/vs2010-rtm-avaliable-on-msdn.html" title="Visual Studio 2010 Ultimate RTM 版开放MSDN下载">Visual Studio 2010 Ultimate RTM 版开放MSDN下载</a></li><li>2009-06-20 -- <a href="http://ofcss.com/2009/06/20/icbc-u-key-in-windows-7-x64.html" title="工行U盾在Windows 7 x64版下的使用">工行U盾在Windows 7 x64版下的使用</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2011/03/07/ie8-compatibility-settings.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CssGaga功能介绍视频</title>
		<link>http://ofcss.com/2011/01/26/cssgaga-intro-video.html</link>
		<comments>http://ofcss.com/2011/01/26/cssgaga-intro-video.html#comments</comments>
		<pubDate>Wed, 26 Jan 2011 05:40:08 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>

		<guid isPermaLink="false">http://ofcss.com/?p=1037</guid>
		<description><![CDATA[这是为涛哥的CssGaga制作的一个视频教程，因为之前涛哥有发，所以我就不发了，不过最近不少朋友留言说涛哥的分享过期了，所以我单独提供一下： CssGaga功能介绍视频：点击下载 在线观看（需要浏览器支持，测试IE9、Chrome支持） 您的浏览器不支持HTML5，建议使用Chrome或Firefox. 随机推荐2008-06-04 -- 在ASP中实现UNIX时间戳2005-12-02 -- “撼动未来”——记微软北京“演唱会”2006-08-24 -- 又开始非常规律的生活了2006-04-25 -- 关于博客和链接2008-04-28 -- PHP渐成合围之势2006-05-07 -- “黄金周”回顾——户籍困境及异地恋情评论2009-07-08 -- ASP.NET MVC 最佳实践（四）2008-05-23 -- 给UCenter的拥蹩们泼点冷水2006-04-16 -- 二外：21世纪最宝贵的不是人才2006-09-28 -- 关于男人]]></description>
			<content:encoded><![CDATA[<p>这是为涛哥的CssGaga制作的一个视频教程，因为之前涛哥有发，所以我就不发了，不过最近不少朋友留言说涛哥的分享过期了，所以我单独提供一下：</p>
<p>CssGaga功能介绍视频：<a href="http://file.wukangrui.com/safe/cssgaga.mp4">点击下载</a><span id="more-1037"></span></p>
<p>在线观看（需要浏览器支持，测试IE9、Chrome支持）</p>
<div><video width="640" height="480" controls="controls" preload="auto" src="http://file.wukangrui.com/safe/cssgaga.mp4" type="video/mp4"><object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://ofcss.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=http%3A//file.wukangrui.com/safe/cssgaga.mp4&amp;poster=/wp-admin/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="640" height="480" type="application/x-shockwave-flash" src="http://ofcss.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=http%3A//file.wukangrui.com/safe/cssgaga.mp4&amp;poster=/wp-admin/" allowfullscreen="true" allowscriptaccess="true" /></object><br />
您的浏览器不支持HTML5，建议使用Chrome或Firefox.<br />
</video></div>
<h3  class="related_post_title">随机推荐</h3><ul class="related_post"><li>2006-03-28 -- <a href="http://ofcss.com/2006/03/28/simulate-window-in-center-with-css.html" title="CSS:模拟Windows窗口及DIV居中">CSS:模拟Windows窗口及DIV居中</a></li><li>2006-06-05 -- <a href="http://ofcss.com/2006/06/05/6571%e8%ae%ba%e5%9d%9b%e9%97%ae%e9%a2%98%e6%b7%b1%e5%85%a5%e6%80%9d%e8%80%83.html" title="6571论坛问题深入思考">6571论坛问题深入思考</a></li><li>2010-09-18 -- <a href="http://ofcss.com/2010/09/18/tencent-service-invitation.html" title="QQ企业邮箱、朋友社区、腾讯微博邀请分享">QQ企业邮箱、朋友社区、腾讯微博邀请分享</a></li><li>2006-08-30 -- <a href="http://ofcss.com/2006/08/30/pdo-api-special-case.html" title="解决整合问题的一个特殊案例">解决整合问题的一个特殊案例</a></li><li>2006-08-24 -- <a href="http://ofcss.com/2006/08/24/stay-away-from-china-telecom-dns-hijack.html" title="远离云南电信的流氓广告骚扰">远离云南电信的流氓广告骚扰</a></li><li>2005-12-06 -- <a href="http://ofcss.com/2005/12/06/marvel-business-china-agricultural-bank.html" title="农行业务奇遇">农行业务奇遇</a></li><li>2006-06-05 -- <a href="http://ofcss.com/2006/06/05/good-boardmaster-and-good-user.html" title="成功的版主和成功的用户">成功的版主和成功的用户</a></li><li>2008-06-14 -- <a href="http://ofcss.com/2008/06/14/june-15-start-use-new-domain.html" title="615：新域名正式启用">615：新域名正式启用</a></li><li>2006-06-04 -- <a href="http://ofcss.com/2006/06/04/climb-langya-mountain.html" title="狼牙山">狼牙山</a></li><li>2006-04-16 -- <a href="http://ofcss.com/2006/04/16/one-very-old-work.html" title="好久以前的一个作品">好久以前的一个作品</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2011/01/26/cssgaga-intro-video.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://file.wukangrui.com/safe/cssgaga.mp4" length="39824850" type="video/mp4" />
		</item>
		<item>
		<title>利用宏避免发送确认邮件时忘记添加附件</title>
		<link>http://ofcss.com/2010/10/29/using-macro-prevent-mail-send-without-html-attachments.html</link>
		<comments>http://ofcss.com/2010/10/29/using-macro-prevent-mail-send-without-html-attachments.html#comments</comments>
		<pubDate>Fri, 29 Oct 2010 13:03:12 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[所谓技术]]></category>
		<category><![CDATA[Office]]></category>
		<category><![CDATA[Outlook]]></category>
		<category><![CDATA[分享]]></category>
		<category><![CDATA[工作]]></category>

		<guid isPermaLink="false">http://ofcss.com/2010/10/29/using-macro-prevent-mail-send-without-html-attachments.html</guid>
		<description><![CDATA[团队的邮件周知流程在不断规范，对邮件格式当然也做出了很多要求。在刚开始的阶段，大家都还不是很熟练，于是频频出现聚精会神地把邮件内容处理完以后，还没有把制作完成的html附件添加到邮件里就点击了发送按钮。虽然Outlook支持邮件撤回功能，但是那个撤回功能实在是太SB了（谁用谁知道……）。当然我们也可以设置延迟发送，这样可以在一定程度上解决问题，但是如果你发送邮件后就去干别的了，那么延迟发送显然也不保险。所以最安全的方式还是在发送邮件时，如果是重构完成的确认邮件，并且又没有添加html附件，就弹出警告阻止发送。我做了一个Outlook的加载项实现这个功能，但是试验证明部署兼容性还是有一些问题（在一同事的Win7 x64 + Office 2007 x86上安装后不能加载）。所以这里分享一下用宏实现的方法。当然你也可以先尝试一下加载项能否在你的电脑上正常工作，可以的话就不用搞这么复杂了：点击下载ISD WebTeam 重构邮件附件检查加载项For Outlook 2007/2010 准备工作 Office的默认设置在各个版本中各有不同，为了保证后面的步骤能够顺利，我们可以先做一些准备工作： “文件 → 选项”，弹出Outlook选项页面（Outlook 2007以前的版本可能在“工具”下直接就有宏，可以跳到第3步）。 在左侧导航区域选择“自定义功能区”，最右侧的“主选项卡”拉到最下面，勾选“开发工具”（图1）。 在左侧导航区域选择“信任中心”，右侧点击“信任中心设置”（图2），弹出信任中心页面（Outlook 2007以前版本可能在“工具”下直接就有“信任设置”）。 左侧点击“宏设置”，右侧勾选“为所有宏提供通知”（图3）。 图1：显示开发工具 图2：打开信任中心设置 图3：设置宏安全性 编写宏 完成准备工作后，回到Outlook主界面，主选项卡上多了一个“开发工具”选项卡。点击打开“开发工具”选项卡，并点击其下的“Visual Basic”（Outlook 2007 以前的版本中可能在“工具”下的“宏”子菜单里就有），如图4。 图4：打开Visual Basic 在“Microsoft Visual Basic for Application”编辑器中，展开左侧的“Microsoft Outlook 对象”并双击“ThisOutlookSession”，打开编辑器，然后把以下代码粘贴到编辑窗口中（图5）： Option Explicit Private Sub Application_ItemSend(ByVal Item As Object, ByVal Cancel As Boolean) Dim fileCount As Integer Dim attach [...]]]></description>
			<content:encoded><![CDATA[<p>团队的邮件周知流程在不断规范，对邮件格式当然也做出了很多要求。在刚开始的阶段，大家都还不是很熟练，于是频频出现聚精会神地把邮件内容处理完以后，还没有把制作完成的html附件添加到邮件里就点击了发送按钮。虽然Outlook支持邮件撤回功能，但是那个撤回功能实在是太SB了（谁用谁知道……）。当然我们也可以设置延迟发送，这样可以在一定程度上解决问题，但是如果你发送邮件后就去干别的了，那么延迟发送显然也不保险。所以最安全的方式还是在发送邮件时，如果是重构完成的确认邮件，并且又没有添加html附件，就弹出警告阻止发送。我做了一个Outlook的加载项实现这个功能，但是试验证明部署兼容性还是有一些问题（在一同事的Win7 x64 + Office 2007 x86上安装后不能加载）。所以这里分享一下用宏实现的方法。当然你也可以先尝试一下加载项能否在你的电脑上正常工作，可以的话就不用搞这么复杂了：<a href="http://ofcss.com/isd/mc12.zip" rel="attachment" target="_blank">点击下载ISD WebTeam 重构邮件附件检查加载项For Outlook 2007/2010</a></p>
<p>  <span id="more-1015"></span><br />
<h4>准备工作</h4>
<p>Office的默认设置在各个版本中各有不同，为了保证后面的步骤能够顺利，我们可以先做一些准备工作：</p>
<ol>
<li>“文件 → 选项”，弹出Outlook选项页面（Outlook 2007以前的版本可能在“工具”下直接就有宏，可以跳到第3步）。 </li>
<li>在左侧导航区域选择“自定义功能区”，最右侧的“主选项卡”拉到最下面，勾选“开发工具”（图1）。 </li>
<li>在左侧导航区域选择“信任中心”，右侧点击“信任中心设置”（图2），弹出信任中心页面（Outlook 2007以前版本可能在“工具”下直接就有“信任设置”）。 </li>
<li>左侧点击“宏设置”，右侧勾选“为所有宏提供通知”（图3）。 </li>
</ol>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/image.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://file.wukangrui.com/attachments/2010/10/image_thumb.png" width="606" height="484" /></a>     <br />图1：显示开发工具</p>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/image1.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://file.wukangrui.com/attachments/2010/10/image_thumb1.png" width="602" height="484" /></a>     <br />图2：打开信任中心设置</p>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/image2.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://file.wukangrui.com/attachments/2010/10/image_thumb2.png" width="596" height="484" /></a>     <br />图3：设置宏安全性</p>
<h4>编写宏</h4>
<p>完成准备工作后，回到Outlook主界面，主选项卡上多了一个“开发工具”选项卡。点击打开“开发工具”选项卡，并点击其下的“Visual Basic”（Outlook 2007 以前的版本中可能在“工具”下的“宏”子菜单里就有），如图4。</p>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/image3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://file.wukangrui.com/attachments/2010/10/image_thumb3.png" width="458" height="176" /></a>     <br />图4：打开Visual Basic</p>
<p>在“Microsoft Visual Basic for Application”编辑器中，展开左侧的“Microsoft Outlook 对象”并双击“ThisOutlookSession”，打开编辑器，然后把以下代码粘贴到编辑窗口中（图5）：</p>
<pre class="code"><span style="color: blue">Option Explicit

Private Sub </span>Application_ItemSend(<span style="color: blue">ByVal </span>Item <span style="color: blue">As Object</span>, <span style="color: blue">ByVal </span>Cancel <span style="color: blue">As Boolean</span>)
    <span style="color: blue">Dim </span>fileCount <span style="color: blue">As Integer
    Dim </span>attach <span style="color: blue">As </span>Attachment
    <span style="color: blue">Dim </span>msg <span style="color: blue">As String
    </span>fileCount = 0
    msg = <span style="color: #a31515">&quot;你尚未添加网页附件，确定要发送吗？&quot;
    </span><span style="color: blue">If </span>(InStr(Item.Subject, <span style="color: #a31515">&quot;重构待确认?&quot;</span>) &gt; 0 <span style="color: blue">And </span>fileCount &lt; 1) <span style="color: blue">Then
        For Each </span>attach <span style="color: blue">In </span>Item.Attachments
            <span style="color: blue">If </span>InStr(attach.FileName, <span style="color: #a31515">&quot;htm&quot;</span>) &gt; 0 <span style="color: blue">Or </span>InStr(attach.FileName, <span style="color: #a31515">&quot;html&quot;</span>) &gt; 0 <span style="color: blue">Then
                </span>fileCount = fileCount + 1
            <span style="color: blue">End If
        Next </span>attach

        <span style="color: blue">If </span>(MsgBox(msg, vbYesNo + vbDefaultButton2 + vbExclamation, <span style="color: #a31515">&quot;附件检查&quot;</span>) = vbYes) <span style="color: blue">Then
            </span>Cancel = <span style="color: blue">False
        Else
            </span>Cancel = <span style="color: blue">True
        End If
    End If
End Sub
</span></pre>
<p>代码说明：这段代码的作用是在邮件发送事件发生时，首先检查邮件主题是否包含“重构待确认”字样（根据重构周知邮件规范），如果是，则检查是否包含后缀名为&quot;html&quot;或者&quot;htm&quot;的附件（必须检查后缀，因为签名中就有一张图片作为附件，同时邮件中也有可能有数量不定的图片附件）。如果有html附件则邮件继续发送，否则弹出警告，要求你确认添加附件（这样保证了如果真的不需要网页附件，也不会不能发送邮件）。</p>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/image4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://file.wukangrui.com/attachments/2010/10/image_thumb4.png" width="644" height="439" /></a> </p>
<p>图5：粘贴宏代码</p>
<p>然后点击左上角的保存按钮（CTRL+S），关闭宏编辑器，退出Outlook。</p>
<h4>启用宏</h4>
<p>重新打开Outlook，由于我们的宏没有进行数字签名，所以默认是没有启用的，启动时Outlook会弹出提示，请在弹出的提示框中点击“启用宏”（如图6，我的截图中第一项可用是因为进行了宏的数字签名，这个没有影响）。</p>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/image5.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://file.wukangrui.com/attachments/2010/10/image_thumb5.png" width="394" height="264" /></a> </p>
<p>图6：启动提示，启用宏</p>
<p>至此，我们的设置就完成了。你可以编写一封新邮件作为测试，在主题中包含“重构待确认”字样，不添加任何html网页文件作为附件，收件人最好写自己。然后点击“发送”，就会看到如下提示：</p>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/image6.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://file.wukangrui.com/attachments/2010/10/image_thumb6.png" width="670" height="473" /></a> </p>
<p>图7：宏测试</p>
<p>看到这个图说明宏已经正常工作，点击“否”即可停止发送，然后补上附件重新发送。如果不需要html附件，只要点“是”即可。</p>
<p>Enjoy It！</p>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2010-09-21 -- <a href="http://ofcss.com/2010/09/21/tencent-isd-2011-campus-recruitment.html" title="腾讯ISD WebTeam 2011年校园招聘正式启动">腾讯ISD WebTeam 2011年校园招聘正式启动</a></li><li>2010-09-18 -- <a href="http://ofcss.com/2010/09/18/tencent-service-invitation.html" title="QQ企业邮箱、朋友社区、腾讯微博邀请分享">QQ企业邮箱、朋友社区、腾讯微博邀请分享</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2010/10/29/using-macro-prevent-mail-send-without-html-attachments.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>clearfix改良及overflow:hidden详解【译】</title>
		<link>http://ofcss.com/2010/10/20/clearfix-reloaded-overflowhidden-demystified-translation.html</link>
		<comments>http://ofcss.com/2010/10/20/clearfix-reloaded-overflowhidden-demystified-translation.html#comments</comments>
		<pubDate>Wed, 20 Oct 2010 06:03:23 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[所谓技术]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[网页]]></category>
		<category><![CDATA[翻译]]></category>

		<guid isPermaLink="false">http://ofcss.com/2010/10/20/clearfix-reloaded-overflowhidden-demystified-translation.html</guid>
		<description><![CDATA[原文:clearfix Reloaded + overflow:hidden Demystified clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了。 这篇短文介绍了如何改进clearfix进行增强，同时对overflow:hidden进行了深入的解释。 clearfix 曾经在网上流行的一种clearfix的方法： .clearfix:after { content: &#34;.&#34;; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 在作者的另一篇文章 everything you know about clearfix is wrong 中，他介绍了这种方法在跨浏览器兼容时会造成的问题，并建议仅对不邻近浮动元素的元素应用clearfix（例如弹出窗口），尽管这样做我们还需要处理由clearfix造成的边距折叠bug（译者注：指clearfix的盒子内部元素的垂直边距被扩展到盒子之外）。有一个demo页面解释了这个问题。 该页面中最开始的两个盒模型的边距叠加行为（底边距保留在盒子内部，顶边距则到了盒子外部）说明：生成的内容将盒子内部元素的边距保留保留在了盒子内部，而在其它浏览器下边距将被扩展到盒子边缘之外。 因此，为了创建跨浏览器兼容的同样的盒模型布局，我们可以把原来的清除浮动的方法改良一下，采用伪类:before [...]]]></description>
			<content:encoded><![CDATA[<p>原文:<a href="http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/">clearfix Reloaded + overflow:hidden Demystified</a></p>
<p>clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了。</p>
<p>这篇短文介绍了如何改进clearfix进行增强，同时对overflow:hidden进行了深入的解释。</p>
<p> <span id="more-969"></span><br />
<h3>clearfix</h3>
<p>曾经在网上流行的一种clearfix的方法：</p>
<div class="code">
<pre><span style="color: maroon">.clearfix:after </span>{
    <span style="color: red">content</span>: <span style="color: blue">&quot;.&quot;</span>;
    <span style="color: red">display</span>: <span style="color: blue">block</span>;
    <span style="color: red">height</span>: <span style="color: blue">0</span>;
    <span style="color: red">clear</span>: <span style="color: blue">both</span>;
    <span style="color: red">visibility</span>: <span style="color: blue">hidden</span>;
    }
<span style="color: maroon">* html .clearfix </span>{ <span style="color: red">zoom</span>: <span style="color: blue">1</span>; } <span style="color: #006400">/* IE6 */
</span><span style="color: maroon">*:first-child+html .clearfix </span>{ <span style="color: red">zoom</span>: <span style="color: blue">1</span>; } <span style="color: #006400">/* IE7 */
</span></pre>
</div>
<p>在作者的另一篇文章 <a href="http://www.tjkdesign.com/articles/clearfix_block-formatting-context_and_hasLayout.asp">everything you know about clearfix is wrong</a> 中，他介绍了这种方法在跨浏览器兼容时会造成的问题，并建议仅对不邻近浮动元素的元素应用clearfix（例如弹出窗口），尽管这样做我们还需要处理由clearfix造成的边距折叠bug（译者注：指clearfix的盒子内部元素的垂直边距被扩展到盒子之外）。有一个<a href="http://www.tjkdesign.com/lab/clearfix/new-clearfix.html">demo页面</a>解释了这个问题。</p>
<p>该页面中最开始的两个盒模型的边距叠加行为（底边距保留在盒子内部，顶边距则到了盒子外部）说明：生成的内容将盒子内部元素的边距保留保留在了盒子内部，而在其它浏览器下边距将被扩展到盒子边缘之外。</p>
<p>因此，为了创建跨浏览器兼容的同样的盒模型布局，我们可以把原来的清除浮动的方法改良一下，采用伪类:before 和 :after：</p>
<div class="code">
<pre><span style="color: maroon">.clearfix:before</span>,
<span style="color: maroon">.clearfix:after </span>{
  <span style="color: red">content</span>: <span style="color: blue">&quot;.&quot;</span>;
  <span style="color: red">display</span>: <span style="color: blue">block</span>;
  <span style="color: red">height</span>: <span style="color: blue">0</span>;
  <span style="color: red">visibility</span>: <span style="color: blue">hidden</span>;
}
<span style="color: maroon">.clearfix:after </span>{<span style="color: red">clear</span>: <span style="color: blue">both</span>;}
<span style="color: maroon">.clearfix </span>{<span style="color: red">zoom</span>: <span style="color: blue">1</span>;} <span style="color: #006400">/* IE &lt; 8 */
</span></pre>
</div>
<p>如此一来可以使顶边距和底边距都保留在盒子内部，符合<a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">w3c关于垂直边距叠加的说明</a>。但是不要在现有的项目中简单地用这些代码替换你的clearfix规则，否则可能会与你原来为了解决边距重叠问题采取的解决方案产生冲突。</p>
<p>&#160;</p>
<h3>overflow</h3>
<p>在众多关于清除浮动的讨论中，出现了overflow:hidden的方法，并且这种方法总是被“如果你把绝对定位元素置于div内部，这些元素（超出的部分）将会被隐藏”的观点击败。但事实并非如此。overflow:hidden 会修剪相对定位（position:relative）的元素，但并不总是会隐藏绝对定位元素。这是因为是否隐藏绝对定位元素实际上取决其包含块（containing block）：</p>
<p>10.1 &quot;containing block&quot; 的定义：</p>
<blockquote>
<p>4. If the element has &#8216;position:absolute&#8217;, the containing block is established by the nearest ancestor with a &#8216;position&#8217; of &#8216;absolute&#8217;, &#8216;relative&#8217;, or &#8216;fixed&#8217;. …</p>
<p>翻译：如果一个元素有&quot;position:absolute&quot;的定义，则其包含块由最近的拥有&quot;position:absolute|relative|fixed&quot;属性的祖先元素确定。…</p>
</blockquote>
<p>这意味着一个带有overflow:hidden样式的盒子，它所包含的绝对定位子元素如果溢出，并不会被隐藏——除非该绝对定位元素的包含块（containing block）就是这个盒子本身或位于该盒子内部。也就是说，如果这个绝对定位元素的包含块的层级高于拥有overflow:hidden样式的盒子，那么这个盒子里面的绝对定位元素不会被截断或隐藏。</p>
<p>作者提供了一个<a href="http://www.tjkdesign.com/lab/clearfix/overflow-and-ap.html">demo 页面</a>演示这个原理（页面上的wrapper设定了overflow:hidden，但是绝对定位的子元素box1却显示在了wrapper外面的左上角，并没有被隐藏）。</p>
<p>&#160;</p>
<h3>更好的选择</h3>
<p>如果你可以对包含浮动的元素应用宽度，那么更好的办法是用下面的样式来清除浮动：</p>
<div class="code">
<pre><span style="color: maroon">display: inline-block;
width: </span>&lt;<span style="color: maroon">any explicit value&gt;</span>;</pre>
</div>
<p>&#160;</p>
<h3>引申阅读</h3>
<ul>
<li><a href="http://csscreator.com/attributes/containedfloat.php">Contained Floats, enclosing floats with pure CSS known as the clearfix technique</a> </li>
<li><a href="http://www.positioniseverything.net/easyclearing.html">How To Clear Floats Without Structural Markup</a> </li>
<li><a href="http://perishablepress.com/press/2009/12/06/new-clearfix-hack/">The New Clearfix Method</a> </li>
<li><a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">10.1 Definition of &quot;containing block&quot;</a> </li>
</ul>
<p><em><strong>关于作者:</strong> Thierry Koblentz 是 Yahoo! 的一位前端工程师。他负责的项目有 <a href="http://www.tjkdesign.com/">TJK Design</a> 和 <a href="http://www.ez-css.org/">ez-css.org</a>. 你可以在twitter上follow他： <a href="http://twitter.com/thierrykoblentz">@thierrykoblentz</a> </em>.</p>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2009-06-22 -- <a href="http://ofcss.com/2009/06/22/whatever-hover-pseudo-class-without-javascript.html" title="Whatever:hover &#8211; 无需javascript让IE支持丰富伪类">Whatever:hover &#8211; 无需javascript让IE支持丰富伪类</a></li><li>2011-03-14 -- <a href="http://ofcss.com/2011/03/14/browser-rendering-optimizer-translation-extra.html" title="对《优化浏览器渲染》的补充【译】">对《优化浏览器渲染》的补充【译】</a></li><li>2011-03-12 -- <a href="http://ofcss.com/2011/03/12/flexible-two-column-layout-reloaded.html" title="自适应的多列图文混排改进">自适应的多列图文混排改进</a></li><li>2011-03-10 -- <a href="http://ofcss.com/2011/03/10/css-border-tricks-with-collapsed-boxes-translation.html" title="CSS边框实现&ldquo;无图化&rdquo;设计【译】">CSS边框实现&ldquo;无图化&rdquo;设计【译】</a></li><li>2010-10-31 -- <a href="http://ofcss.com/2010/10/31/prevent-a-float-drop-in-ie6-translation.html" title="CSS技巧:如何避免IE6中的&quot;浮动下坠&quot;【译】">CSS技巧:如何避免IE6中的&quot;浮动下坠&quot;【译】</a></li><li>2010-10-30 -- <a href="http://ofcss.com/2010/10/30/bfc-element-margin-bug-in-webkit.html" title="webkit中BFC元素临近浮动元素时的边距bug">webkit中BFC元素临近浮动元素时的边距bug</a></li><li>2010-10-22 -- <a href="http://ofcss.com/2010/10/22/the-value-of-html-validation-translation.html" title="HTML验证的价值探讨【译】">HTML验证的价值探讨【译】</a></li><li>2009-12-21 -- <a href="http://ofcss.com/2009/12/21/web-developer-understand-css-box-model.html" title="前台开发从头说起：理解css盒模型">前台开发从头说起：理解css盒模型</a></li><li>2009-12-16 -- <a href="http://ofcss.com/2009/12/16/web-developer-about-css-selector.html" title="前台开发从头说起：谈谈CSS选择符">前台开发从头说起：谈谈CSS选择符</a></li><li>2009-12-15 -- <a href="http://ofcss.com/2009/12/15/web-developer-from-web-standard.html" title="前台开发从头说起：关于web标准化">前台开发从头说起：关于web标准化</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2010/10/20/clearfix-reloaded-overflowhidden-demystified-translation.html/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>卸载360安全卫士造成网络异常问题解决方案</title>
		<link>http://ofcss.com/2010/10/10/360-network-monitor-driver-issue.html</link>
		<comments>http://ofcss.com/2010/10/10/360-network-monitor-driver-issue.html#comments</comments>
		<pubDate>Sun, 10 Oct 2010 02:08:51 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[360]]></category>
		<category><![CDATA[技巧]]></category>
		<category><![CDATA[故障排除]]></category>
		<category><![CDATA[网络]]></category>
		<category><![CDATA[驱动]]></category>

		<guid isPermaLink="false">http://ofcss.com/2010/10/10/360-network-monitor-driver-issue.html</guid>
		<description><![CDATA[最近360以“隐私保护器”发起对QQ的攻势以来，双方的支持者在网上也是热议不已。网易天涯等都发起调查，看如果必须二选一的话是卸QQ的人多还是卸360的人多。从调查来看貌似选择卸QQ的多一些。不过调查是一回事，动手是另一回事。另外也没听说谁卸载QQ之后会造成系统功能方面影响的。 不过我卸载360之后倒是遇到了几个非常“诡异”的问题——之所以加双引号是因为那是在没找到原因的时候确实觉得很奇怪——然后我通过墙外的google来搜索也没找到较明确的解决办法。所以在找到原因并顺利解决了问题之后我决定把方法写下来，以方便遇到和我相同或类似问题的朋友。 问题描述： 1. Internet Explorer和Chrome设置自动代理pac文件无效； 2. 访问QQ空间会偶尔遇到完全没样式，js数据加载不出来的问题； 3. 访问QQ校友的应用时，偶尔会出现域名无法解析的问题（cdn镜像域名无法解析）； 4. QQ旋风提示“获取积分失效”，由于无法获得积分信息和等级，所以和年费会员或会员VIP5以上身份挂钩的离线下载就莫名消失了。 以上就是这两三天困扰我的问题。我想尽了各种办法都没解决，但是后来通过一些工具软件逐步定位到是域名解析不成功造成。 解决过程： 既然定位到是域名解析导致的问题，当然要从域名解析着手。一开始以为是设置pac自动代理文件不成功造成的（因为基本上是chrome和ie出现问题，firefox出问题相当少），所以就完全去掉了pac自动代理，结果问题依旧。 然后我考虑可能真的是QQ相关业务的CDN镜像的域名的Name Server出问题了（chrome可以查看到是哪个Name Server解析哪个域名失败），如果是这样，那就只能等了。但是后来发现在公司的电脑上一切正常，只有在家里才会遇到这些问题。所以应该可以排除域名服务器出问题的可能了。 再回到自己电脑上找原因，我当时有两个怀疑：一是长城宽带的线路问题；二是我自己的本地Name Server设置问题。因为我一直是用OpenDNS的Name Server，不排除OpenDNS被墙或者像google一样“被抽风”的可能。所以我决定去掉OpenDNS，改为全自动获取，用长宽自己的Name Server。 就在打开本地连接属性的时候我一下子看到了本来应该已经被卸载的360 Network Monitor Driver: （发此文时我的已被卸载，图片借用网络上的） 360 Network Monitor Driver是360安全卫士和360防火墙用来拦截和监控网络连接的重要组件。一般如果有安装虚拟机的话（比如VMWare，VMWare Player，VitualBox，XPMode）也都会在本地连接增加相应的驱动或者协议，这是很正常的。 但是当时我的360已经卸载了，所以这个驱动留下来就不正常了，它已经没有存在的意义了。我当时忘了去看一下，360安装目录下的文件是否还有留下的，就直接卸载了这个驱动。 结果卸载完后，我的旋风离线下载功能立刻恢复正常。我很激动地重新去设置IE和Chrome的Pac自动代理文件，也正常了。再打开校友和空间的几个页面不断刷新坚持了五六分钟，没有再出现问题。 由此我觉得由于这个360残留驱动导致问题的可能性比较大，当然，没有理论知识和更具体的实验数据做支撑我也就不能下定论。只能说这是一个可能正确的判断和处理办法。 如果你也打算卸载掉360，或者和我一样已经卸载了，那么建议你应该去看看你的360 Network Monitor Driver是否也一起被卸载了。如果没有的话，还是自己动手卸载一下。主程序都卸载了，留下的这个驱动是肯定没有用的。 相关日志2012-03-30 -- 禁用Firefox自带的元素查看工具2011-03-20 -- 容易被误解的overflow:hidden2011-03-12 -- 自适应的多列图文混排改进2011-03-10 -- CSS边框实现&#8220;无图化&#8221;设计【译】2011-03-07 -- IE8/9兼容性设置2009-06-20 -- 工行U盾在Windows 7 x64版下的使用2009-06-17 -- [...]]]></description>
			<content:encoded><![CDATA[<p>最近360以“隐私保护器”发起对QQ的攻势以来，双方的支持者在网上也是热议不已。网易天涯等都发起调查，看如果必须二选一的话是卸QQ的人多还是卸360的人多。从调查来看貌似选择卸QQ的多一些。不过调查是一回事，动手是另一回事。另外也没听说谁卸载QQ之后会造成系统功能方面影响的。</p>
<p>不过我卸载360之后倒是遇到了几个非常“诡异”的问题——之所以加双引号是因为那是在没找到原因的时候确实觉得很奇怪——然后我通过墙外的google来搜索也没找到较明确的解决办法。所以在找到原因并顺利解决了问题之后我决定把方法写下来，以方便遇到和我相同或类似问题的朋友。</p>
<p>  <span id="more-965"></span>
<p>问题描述：</p>
<p>1. Internet Explorer和Chrome设置自动代理pac文件无效；</p>
<p>2. 访问QQ空间会偶尔遇到完全没样式，js数据加载不出来的问题；</p>
<p>3. 访问QQ校友的应用时，偶尔会出现域名无法解析的问题（cdn镜像域名无法解析）；</p>
<p>4. QQ旋风提示“获取积分失效”，由于无法获得积分信息和等级，所以和年费会员或会员VIP5以上身份挂钩的离线下载就莫名消失了。</p>
<p>以上就是这两三天困扰我的问题。我想尽了各种办法都没解决，但是后来通过一些工具软件逐步定位到是域名解析不成功造成。</p>
<p>解决过程：</p>
<p>既然定位到是域名解析导致的问题，当然要从域名解析着手。一开始以为是设置pac自动代理文件不成功造成的（因为基本上是chrome和ie出现问题，firefox出问题相当少），所以就完全去掉了pac自动代理，结果问题依旧。</p>
<p>然后我考虑可能真的是QQ相关业务的CDN镜像的域名的Name Server出问题了（chrome可以查看到是哪个Name Server解析哪个域名失败），如果是这样，那就只能等了。但是后来发现在公司的电脑上一切正常，只有在家里才会遇到这些问题。所以应该可以排除域名服务器出问题的可能了。</p>
<p>再回到自己电脑上找原因，我当时有两个怀疑：一是长城宽带的线路问题；二是我自己的本地Name Server设置问题。因为我一直是用OpenDNS的Name Server，不排除OpenDNS被墙或者像google一样“被抽风”的可能。所以我决定去掉OpenDNS，改为全自动获取，用长宽自己的Name Server。</p>
<p>就在打开本地连接属性的时候我一下子看到了本来应该已经被卸载的360 Network Monitor Driver:</p>
<p align="center"><a href="http://file.wukangrui.com/attachments/2010/10/360networkmonitordriver.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="360-network-monitor-driver" border="0" alt="360-network-monitor-driver" src="http://file.wukangrui.com/attachments/2010/10/360networkmonitordriver_thumb.jpg" width="403" height="446" /></a>     <br />（发此文时我的已被卸载，图片借用网络上的）</p>
<p align="left">360 Network Monitor Driver是360安全卫士和360防火墙用来拦截和监控网络连接的重要组件。一般如果有安装虚拟机的话（比如VMWare，VMWare Player，VitualBox，XPMode）也都会在本地连接增加相应的驱动或者协议，这是很正常的。</p>
<p align="left">但是当时我的360已经卸载了，所以这个驱动留下来就不正常了，它已经没有存在的意义了。我当时忘了去看一下，360安装目录下的文件是否还有留下的，就直接卸载了这个驱动。</p>
<p align="left">结果卸载完后，我的旋风离线下载功能立刻恢复正常。我很激动地重新去设置IE和Chrome的Pac自动代理文件，也正常了。再打开校友和空间的几个页面不断刷新坚持了五六分钟，没有再出现问题。</p>
<p align="left">由此我觉得由于这个360残留驱动导致问题的可能性比较大，当然，没有理论知识和更具体的实验数据做支撑我也就不能下定论。只能说这是一个可能正确的判断和处理办法。</p>
<p align="left">如果你也打算卸载掉360，或者和我一样已经卸载了，那么建议你应该去看看你的360 Network Monitor Driver是否也一起被卸载了。如果没有的话，还是自己动手卸载一下。主程序都卸载了，留下的这个驱动是肯定没有用的。</p>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2012-03-30 -- <a href="http://ofcss.com/2012/03/30/disable-firefox-built-in-inspector.html" title="禁用Firefox自带的元素查看工具">禁用Firefox自带的元素查看工具</a></li><li>2011-03-20 -- <a href="http://ofcss.com/2011/03/20/misunderstood-of-overflow-hidden.html" title="容易被误解的overflow:hidden">容易被误解的overflow:hidden</a></li><li>2011-03-12 -- <a href="http://ofcss.com/2011/03/12/flexible-two-column-layout-reloaded.html" title="自适应的多列图文混排改进">自适应的多列图文混排改进</a></li><li>2011-03-10 -- <a href="http://ofcss.com/2011/03/10/css-border-tricks-with-collapsed-boxes-translation.html" title="CSS边框实现&ldquo;无图化&rdquo;设计【译】">CSS边框实现&ldquo;无图化&rdquo;设计【译】</a></li><li>2011-03-07 -- <a href="http://ofcss.com/2011/03/07/ie8-compatibility-settings.html" title="IE8/9兼容性设置">IE8/9兼容性设置</a></li><li>2009-06-20 -- <a href="http://ofcss.com/2009/06/20/icbc-u-key-in-windows-7-x64.html" title="工行U盾在Windows 7 x64版下的使用">工行U盾在Windows 7 x64版下的使用</a></li><li>2009-06-17 -- <a href="http://ofcss.com/2009/06/17/regular-expression-in-dreamweaver.html" title="Dreamweaver中的正则表达式">Dreamweaver中的正则表达式</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2010/10/10/360-network-monitor-driver-issue.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>腾讯ISD WebTeam 2011年校园招聘正式启动</title>
		<link>http://ofcss.com/2010/09/21/tencent-isd-2011-campus-recruitment.html</link>
		<comments>http://ofcss.com/2010/09/21/tencent-isd-2011-campus-recruitment.html#comments</comments>
		<pubDate>Tue, 21 Sep 2010 12:49:54 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[QQ]]></category>
		<category><![CDATA[工作]]></category>
		<category><![CDATA[招聘]]></category>
		<category><![CDATA[腾讯]]></category>

		<guid isPermaLink="false">http://wukangrui.com/2010/09/21/tencent-isd-2011-campus-recruitment.html</guid>
		<description><![CDATA[腾讯公司2011年校园招聘即将正式开展，来自腾讯互联网业务系统的设计团队－腾讯ISD，盛情邀请您加入我们的大家庭。 我们专注于网站的可用性、视觉风格以及网页重构，为了打造千万用户级的优秀产品，我们对网站产品的体验设计始终保持着无限的热情。 我们的产品类型挺丰富，有抒发心情分享快乐的“QQ空间”，有用心服务逐渐融入生活带给你众多新特权的“QQ会员”，有教你潮爆装束的“QQshow”，有不可缺少的“多媒体”视听冲击，还有足不出户购遍天下的“拍拍”。 我们的成员类型挺丰富，有怪诞搞笑的大叔，有热情奔放的大婶，有沉着睿智的思考男，还有天下无敌的美少女。 “创造完美的互联网生活体验”是我们的梦想，距离这个目标还有很长的路要走，如果你愿意，来吧，欢迎和我们一起。 ========================================== 相关岗位信息如下： 用户研究工程师 交互设计师 视觉设计师 关于以上职位的详细说明，请参阅：http://isd.tencent.com/?p=2364 ========================================== 网页重构工程师 岗位职责 我们负责互联网系统（QQ空间、QQ会员、QQshow、多媒体、拍拍）的前端重构工作， 我们负责将视觉设计稿精确还原为静态页面，并做到结构与表现的分离， 我们负责将结构以及样式代码进行模块化处理，使其符合高效的复用性原则，从而实现敏捷开发， 我们负责规划全站目录结构，保证结构和表现文件布局的合理性和可扩展性， 我们关注站点性能和运营成本，从专业角度实现站点速度及用户体验的最优化， 我们关注结构标签的语义化及站点的标准化，并从专业角度进行必要的SEO操作， 我们关注业界前沿技术，并不断将其转化为实际项目生产力， 我们配合前后台开发人员，一同完成项目的开发阶段，将最终可用的网站交付用户手中。 岗位要求 要胜任这样的工作，需要你： 1、精通Xhtml+css，并了解本职位关联技术，能将设计方案转换输出web界面； 2、精通代码的标准化； 3、精通图像处理软件(Photoshop)与网页编辑软件(Dreamweaver)； 4、保持页面不同浏览器及分辨率下良好的兼容性和适用性，以及结构、表现、行为的分离； 5、了解网页访问速度体验优化； 6、了解平台代码模块化思维； 7、逻辑分析能力强，善于沟通，较强的学习和团队合作能力； 8、对业界最新的相关技术有浓厚的兴趣和深入的见解。 简历投递 请将简历及相关作品发至webteam@qq.com，标题请注明“[校园招聘]网页重构工程师”。 ================================== 关于腾讯公司2011年校园招聘的更多信息，请访问http://join.qq.com。 相关日志2010-10-29 -- 利用宏避免发送确认邮件时忘记添加附件2010-09-18 -- QQ企业邮箱、朋友社区、腾讯微博邀请分享2009-04-16 -- QQ2009正式版发布]]></description>
			<content:encoded><![CDATA[<p><a href="http://file.wukangrui.com/blog/ISDWebTeam2011_1249C/http_imgload.cgi.jpg"><img title="腾讯ISD 2011年校园招聘专属岗位 用户研究/交互设计/视觉设计/网页重构" src="http://file.wukangrui.com/blog/ISDWebTeam2011_1249C/http_imgload.cgi_thumb.jpg" alt="腾讯ISD 2011年校园招聘专属岗位 用户研究/交互设计/视觉设计/网页重构" width="531" height="226" /></a></p>
<p>腾讯公司2011年校园招聘即将正式开展，来自腾讯互联网业务系统的设计团队－腾讯ISD，盛情邀请您加入我们的大家庭。</p>
<p><span id="more-954"></span></p>
<p>我们专注于网站的可用性、视觉风格以及网页重构，为了打造千万用户级的优秀产品，我们对网站产品的体验设计始终保持着无限的热情。</p>
<p>我们的产品类型挺丰富，有抒发心情分享快乐的“QQ空间”，有用心服务逐渐融入生活带给你众多新特权的“QQ会员”，有教你潮爆装束的“QQshow”，有不可缺少的“多媒体”视听冲击，还有足不出户购遍天下的“拍拍”。</p>
<p>我们的成员类型挺丰富，有怪诞搞笑的大叔，有热情奔放的大婶，有沉着睿智的思考男，还有天下无敌的美少女。</p>
<p>“创造完美的互联网生活体验”是我们的梦想，距离这个目标还有很长的路要走，如果你愿意，来吧，欢迎和我们一起。</p>
<p>==========================================</p>
<p>相关岗位信息如下：</p>
<p><strong>用户研究工程师</strong></p>
<p><strong>交互设计师</strong></p>
<p><strong>视觉设计师</strong></p>
<p><strong>关于以上职位的详细说明，请参阅：<a title="http://isd.tencent.com/?p=2364" href="http://isd.tencent.com/?p=2364">http://isd.tencent.com/?p=2364</a></strong></p>
<p>==========================================</p>
<p><strong>网页重构工程师</strong></p>
<p><strong>岗位职责</strong></p>
<p>我们负责互联网系统（QQ空间、QQ会员、QQshow、多媒体、拍拍）的前端重构工作，</p>
<p>我们负责将视觉设计稿精确还原为静态页面，并做到结构与表现的分离，</p>
<p>我们负责将结构以及样式代码进行模块化处理，使其符合高效的复用性原则，从而实现敏捷开发，</p>
<p>我们负责规划全站目录结构，保证结构和表现文件布局的合理性和可扩展性，</p>
<p>我们关注站点性能和运营成本，从专业角度实现站点速度及用户体验的最优化，</p>
<p>我们关注结构标签的语义化及站点的标准化，并从专业角度进行必要的SEO操作，</p>
<p>我们关注业界前沿技术，并不断将其转化为实际项目生产力，</p>
<p>我们配合前后台开发人员，一同完成项目的开发阶段，将最终可用的网站交付用户手中。</p>
<p><strong>岗位要求</strong></p>
<p>要胜任这样的工作，需要你：</p>
<p>1、精通Xhtml+css，并了解本职位关联技术，能将设计方案转换输出web界面；</p>
<p>2、精通代码的标准化；</p>
<p>3、精通图像处理软件(Photoshop)与网页编辑软件(Dreamweaver)；</p>
<p>4、保持页面不同浏览器及分辨率下良好的兼容性和适用性，以及结构、表现、行为的分离；</p>
<p>5、了解网页访问速度体验优化；</p>
<p>6、了解平台代码模块化思维；</p>
<p>7、逻辑分析能力强，善于沟通，较强的学习和团队合作能力；</p>
<p>8、对业界最新的相关技术有浓厚的兴趣和深入的见解。</p>
<p><strong>简历投递</strong></p>
<p>请将简历及相关作品发至<a href="mailto:webteam@qq.com">webteam@qq.com</a>，标题请注明“<strong>[校园招聘]网页重构工程师</strong>”。</p>
<p>==================================</p>
<p>关于腾讯公司2011年校园招聘的更多信息，请访问<a href="http://join.qq.com">http://join.qq.com</a>。</p>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2010-10-29 -- <a href="http://ofcss.com/2010/10/29/using-macro-prevent-mail-send-without-html-attachments.html" title="利用宏避免发送确认邮件时忘记添加附件">利用宏避免发送确认邮件时忘记添加附件</a></li><li>2010-09-18 -- <a href="http://ofcss.com/2010/09/18/tencent-service-invitation.html" title="QQ企业邮箱、朋友社区、腾讯微博邀请分享">QQ企业邮箱、朋友社区、腾讯微博邀请分享</a></li><li>2009-04-16 -- <a href="http://ofcss.com/2009/04/16/tencent-qq-2009-rtm-released.html" title="QQ2009正式版发布">QQ2009正式版发布</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2010/09/21/tencent-isd-2011-campus-recruitment.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>QQ企业邮箱、朋友社区、腾讯微博邀请分享</title>
		<link>http://ofcss.com/2010/09/18/tencent-service-invitation.html</link>
		<comments>http://ofcss.com/2010/09/18/tencent-service-invitation.html#comments</comments>
		<pubDate>Fri, 17 Sep 2010 17:23:00 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[QQ]]></category>
		<category><![CDATA[免费]]></category>
		<category><![CDATA[分享]]></category>
		<category><![CDATA[邀请]]></category>

		<guid isPermaLink="false">http://wukangrui.com/2010/09/18/tencent-service-invitation.html</guid>
		<description><![CDATA[手上有一些QQ业务相关的资格邀请，放在手里没有，周围的朋友大多也不需要我邀请也已经开通了这些业务。所以想到干脆放到博客上来。需要的朋友可以直接使用。不过使用之后希望按照以下格式留个言： XXXX资源##我已使用。 (其中的XXXX表示资源类别，##表示资源编号) 腾讯朋友邀请： http://reg.pengyou.com/index.php?mod=reg&#38;act=invite&#38;invitecode=55ed14e3eaa0180b0e71e66c7a425507 http://reg.pengyou.com/index.php?mod=reg&#38;act=invite&#38;invitecode=1025db4e15207bd481c13bd15e8e3e1c  http://reg.pengyou.com/index.php?mod=reg&#38;act=invite&#38;invitecode=befe6f6805139abf827f3a0361e81941  http://reg.pengyou.com/index.php?mod=reg&#38;act=invite&#38;invitecode=e047b0733cf32b5f6194ac984c6aac18  http://reg.pengyou.com/index.php?mod=reg&#38;act=invite&#38;invitecode=32f479d4c7e97f85ac6aa5c3f66b0312  腾讯微博邀请（可无限次使用）： http://t.qq.com/invite/u/kairee QQ企业邮箱邀请： 由于企业邮箱的邀请不是链接方式而是邮件邀请方式，有需要的童鞋请在评论中写下你的邮箱。附QQ企业邮箱功能预览： 功能 规格 独立邮箱帐号数 200个 多域名支持 5个 邮箱容量 无限制 企业网盘 2GB，内部共享 普通附件 50 MB 超大附件 1 GB/每个帐号 短信支持(免费） 来信提醒、备忘提醒 全球互通、南北互联 国内外10多个城市架设服务器 防病毒 卡巴斯基防病毒引擎 反垃圾功能 系统级反垃圾过滤，支持企业自定义黑白名单 多种方式访问 网页、POP3/SMTP、IMAP 支持SSL 全程SSL 企业内部信息通知 支持公告板和邮件群发 帐号自主管理 支持批量导入、邮件群组、分级管理 企业地址本 多级组织架构管理 日志管理 用户和管理员登录及常用操作记录 企业LOGO 支持自定义 相关日志2010-10-29 -- 利用宏避免发送确认邮件时忘记添加附件2010-09-21 -- [...]]]></description>
			<content:encoded><![CDATA[<p>手上有一些QQ业务相关的资格邀请，放在手里没有，周围的朋友大多也不需要我邀请也已经开通了这些业务。所以想到干脆放到博客上来。需要的朋友可以直接使用。不过使用之后希望按照以下格式留个言：</p>
<blockquote><p>XXXX资源<strong>##</strong>我已使用。</p>
<p>(其中的XXXX表示资源类别，##表示资源编号)</p></blockquote>
<p><span id="more-953"></span></p>
<h4><a title="腾讯朋友火热上线" href="http://www.pengyou.com/" target="_blank">腾讯朋友</a>邀请：</h4>
<ol>
<li><a title="http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=55ed14e3eaa0180b0e71e66c7a425507" href="http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=55ed14e3eaa0180b0e71e66c7a425507">http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=55ed14e3eaa0180b0e71e66c7a425507</a></li>
<li><a href="http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=1025db4e15207bd481c13bd15e8e3e1c">http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=1025db4e15207bd481c13bd15e8e3e1c</a> </li>
<li><a href="http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=befe6f6805139abf827f3a0361e81941">http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=befe6f6805139abf827f3a0361e81941</a> </li>
<li><a href="http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=e047b0733cf32b5f6194ac984c6aac18">http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=e047b0733cf32b5f6194ac984c6aac18</a> </li>
<li><a href="http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=32f479d4c7e97f85ac6aa5c3f66b0312">http://reg.pengyou.com/index.php?mod=reg&amp;act=invite&amp;invitecode=32f479d4c7e97f85ac6aa5c3f66b0312</a> </li>
</ol>
<h4><a title="腾讯QQ微博" rel="nofollow" href="http://t.qq.com/invite/u/kairee">腾讯微博</a>邀请（可无限次使用）：</h4>
<p><a href="http://t.qq.com/invite/u/kairee">http://t.qq.com/invite/u/kairee</a></p>
<h4><a title="完全免费，可以独立使用也可以关联到QQ的企业邮箱，免费提供回信短信提醒等高级功能，容量按需扩容，无限容量。" rel="nofollow" href="http://exmail.qq.com/">QQ企业邮箱</a>邀请：</h4>
<p>由于企业邮箱的邀请不是链接方式而是邮件邀请方式，有需要的童鞋请在评论中写下你的邮箱。附QQ企业邮箱功能预览：</p>
<table style="margin: 10px auto;" cellspacing="0">
<thead>
<tr>
<th class="txt_right" style="border-bottom: #ccc 1px solid; border-left: #ccc 0px solid; width: 160px; border-top: #ccc 0px solid; border-right: #ccc 1px solid;">功能</th>
<th class="txt_left" style="border-bottom: #ccc 1px solid; width: 300px;">规格</th>
</tr>
</thead>
<tbody>
<tr>
<th class="class">独立邮箱帐号数</th>
<td>200个</td>
</tr>
<tr class="class">
<th class="class">多域名支持</th>
<td>5个</td>
</tr>
<tr>
<th class="class">邮箱容量</th>
<td><strong><span style="color: #ff0000;">无限制</span></strong></td>
</tr>
<tr class="class">
<th class="class">企业网盘</th>
<td>2GB，内部共享</td>
</tr>
<tr>
<th class="class">普通附件</th>
<td>50 MB</td>
</tr>
<tr class="class">
<th class="class">超大附件</th>
<td>1 GB/每个帐号</td>
</tr>
<tr>
<th class="class">短信支持(<span style="color: #ff0000;">免费</span>）</th>
<td>来信提醒、备忘提醒</td>
</tr>
<tr class="class">
<th class="class">全球互通、南北互联</th>
<td>国内外10多个城市架设服务器</td>
</tr>
<tr>
<th class="class">防病毒</th>
<td>卡巴斯基防病毒引擎</td>
</tr>
<tr class="class">
<th class="class">反垃圾功能</th>
<td>系统级反垃圾过滤，支持企业自定义黑白名单</td>
</tr>
<tr>
<th class="class">多种方式访问</th>
<td><strong><span style="color: #ff0000;">网页、POP3/SMTP、IMAP</span></strong></td>
</tr>
<tr class="class">
<th class="class">支持SSL</th>
<td>全程SSL</td>
</tr>
<tr>
<th class="class">企业内部信息通知</th>
<td>支持公告板和邮件群发</td>
</tr>
<tr class="class">
<th class="class">帐号自主管理</th>
<td>支持批量导入、邮件群组、分级管理</td>
</tr>
<tr>
<th class="class">企业地址本</th>
<td>多级组织架构管理</td>
</tr>
<tr class="class">
<th class="class">日志管理</th>
<td>用户和管理员登录及常用操作记录</td>
</tr>
<tr>
<th class="class">企业LOGO</th>
<td>支持自定义</td>
</tr>
</tbody>
</table>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2010-10-29 -- <a href="http://ofcss.com/2010/10/29/using-macro-prevent-mail-send-without-html-attachments.html" title="利用宏避免发送确认邮件时忘记添加附件">利用宏避免发送确认邮件时忘记添加附件</a></li><li>2010-09-21 -- <a href="http://ofcss.com/2010/09/21/tencent-isd-2011-campus-recruitment.html" title="腾讯ISD WebTeam 2011年校园招聘正式启动">腾讯ISD WebTeam 2011年校园招聘正式启动</a></li><li>2009-04-16 -- <a href="http://ofcss.com/2009/04/16/tencent-qq-2009-rtm-released.html" title="QQ2009正式版发布">QQ2009正式版发布</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2010/09/18/tencent-service-invitation.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Godaddy 2010年最新优惠码[不断更新中]</title>
		<link>http://ofcss.com/2010/09/08/godaddy-coupon-2010-newest.html</link>
		<comments>http://ofcss.com/2010/09/08/godaddy-coupon-2010-newest.html#comments</comments>
		<pubDate>Tue, 07 Sep 2010 20:52:11 +0000</pubDate>
		<dc:creator>小李刀刀</dc:creator>
				<category><![CDATA[乱七八糟]]></category>
		<category><![CDATA[godaddy]]></category>
		<category><![CDATA[主机]]></category>
		<category><![CDATA[优惠]]></category>
		<category><![CDATA[域名]]></category>

		<guid isPermaLink="false">http://wukangrui.com/2010/09/08/godaddy-coupon-2010-09.html</guid>
		<description><![CDATA[由于现在成了Godaddy的用户，于是也开始把收到的Godaddy优惠码分享出来。能帮助到有需要的人最好，没有的话呢也没关系的哈。 目前提供的两个最新优惠码分别是域名30%优惠一枚、所有服务20% – 25%优惠共三枚、独立和虚拟独立主机15%优惠一枚。 定单达到60美元以上优惠20%： 优惠码：NC3D13 截止日期：9/30/2010 定单达到75美元以上优惠20%： 优惠码：fbfhome20 截止日期：9/29/2010 （北京时间2010年9月30日上午） 定单达到75美元以上优惠25%： 优惠码：gda933by 截止日期：9/26/2010 （北京时间2010年9月27日上午） .COM 新域名注册享受30%优惠： 优惠码：NC3D2 截止日期：9/19/2010 （北京时间到2010年9月20日上午） 独立和虚拟独立主机15%优惠： 优惠码：fbServer15 截至日期：9/20/2010 （北京时间到2010年9月21日上午） ===以上是有时效性的优惠码，以下则是长期有效的，来自网络=== 优惠券: cjcophst20 &#160;&#160;&#160; 购买Unlimited Hosting 方案特殊优惠码&#60;1年方案 $9.99/月, 2-年方案$6.29/月,3年方案$4.79/月 优惠券: cjcshare20 &#160;&#160;&#160; 购买所有主机产品优惠20%. （仅虚拟主机适用） 优惠券：cjc20hun &#160;&#160;&#160; 购买100美元及以上可以优惠20美元 优惠码: cjctenoff &#160;&#160;&#160; 购买50美元及以上商品使用此优惠码可以优惠10美元 优惠码: cjcsave &#160;&#160;&#160; 购买30美元及以上商品使用此优惠码可以优惠 5 美元 优惠码：cjcdeal &#160;&#160;&#160; 购买75美元以上优惠15% 优惠码:cjcdollar [...]]]></description>
			<content:encoded><![CDATA[<p>由于现在成了Godaddy的用户，于是也开始把收到的Godaddy优惠码分享出来。能帮助到有需要的人最好，没有的话呢也没关系的哈。</p>
<p>目前提供的两个最新优惠码分别是域名30%优惠一枚、所有服务20% – 25%优惠共三枚、独立和虚拟独立主机15%优惠一枚。</p>
<p> <span id="more-948"></span>
<p>定单达到60美元以上优惠20%：</p>
<ul>
<li>优惠码：<b>NC3D13</b></li>
<li>截止日期：<strong>9/30/2010</strong></li>
</ul>
<p>定单达到75美元以上优惠20%：</p>
<ul>
<li>优惠码：<b>fbfhome20</b> </li>
<li>截止日期：<strong>9/29/2010</strong> （北京时间2010年9月30日上午） </li>
</ul>
<p>定单达到75美元以上优惠25%：</p>
<ul>
<li>优惠码：<strong>gda933by</strong> </li>
<li>截止日期：<strong>9/26/2010</strong> （北京时间2010年9月27日上午） </li>
</ul>
<p>.COM 新域名注册享受30%优惠：</p>
<ul>
<li>优惠码：<strong>NC3D2</strong> </li>
<li>截止日期：<strong>9/19/2010</strong> （北京时间到2010年9月20日上午） </li>
</ul>
<p>独立和虚拟独立主机15%优惠：</p>
<ul>
<li>优惠码：<b>fbServer15</b> </li>
<li>截至日期：<strong>9/20/2010</strong> （北京时间到2010年9月21日上午） </li>
</ul>
<p><font color="#ff0000"><strong>===以上是有时效性的优惠码，以下则是长期有效的，来自网络===</strong></font></p>
<ul>
<li>优惠券: <strong>cjcophst20</strong>       <br />&#160;&#160;&#160; 购买Unlimited Hosting 方案特殊优惠码&lt;1年方案 $9.99/月, 2-年方案$6.29/月,3年方案$4.79/月 </li>
<li>优惠券: <strong>cjcshare20</strong>       <br />&#160;&#160;&#160; 购买所有主机产品优惠20%. （仅虚拟主机适用） </li>
<li>优惠券：<strong>cjc20hun</strong>       <br />&#160;&#160;&#160; 购买100美元及以上可以优惠20美元 </li>
<li>优惠码: <strong>cjctenoff</strong>       <br />&#160;&#160;&#160; 购买50美元及以上商品使用此优惠码可以优惠10美元 </li>
<li>优惠码: <strong>cjcsave</strong>       <br />&#160;&#160;&#160; 购买30美元及以上商品使用此优惠码可以优惠 5 美元 </li>
<li>优惠码：<strong>cjcdeal</strong>       <br />&#160;&#160;&#160; 购买75美元以上优惠15% </li>
<li>优惠码:<strong>cjcdollar</strong>       <br />&#160;&#160;&#160; 优惠一美元，域名续费和org域名注册除外。 </li>
<li>优惠码:<strong>cjcfat75</strong>       <br />&#160;&#160;&#160; 消费75美金或以上者，优惠15%。 </li>
<li>优惠码:<strong>cjc4Udom</strong>       <br />&#160;&#160;&#160; COM域名注册 $7.49 </li>
<li>优惠码: <strong>cjc4U75</strong>       <br />&#160;&#160;&#160; 消费75美金或以上者，优惠15% </li>
</ul>
<h3  class="related_post_title">相关日志</h3><ul class="related_post"><li>2008-06-14 -- <a href="http://ofcss.com/2008/06/14/june-15-start-use-new-domain.html" title="615：新域名正式启用">615：新域名正式启用</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ofcss.com/2010/09/08/godaddy-coupon-2010-newest.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

