webrebuild.org第四届年会——金秋四城联动

[译]IE6终极备忘：修复IE6下 25+ Bugs

2010年01月08日 | HTML/CSS, JavaScript

去年就想将IE的bug系统地整理下，但一直都很忙没有完成，看到这篇E文后，我毫不犹豫的放下了手中的工作将之翻译出来。
由于是第一次译文，所以错误在所难免，欢迎大家批评指正。

原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

翻译：http://www.vfresh.org/w3c/727(译文对原文进行了补充)

对IE6最好的策略就是不去兼容它。

好吧，我知道你的难处，你不得不去兼容IE6这个狗血的浏览器，因此不得不在兼容IE6上花费很多时间。对此，我颇有同感，让我来帮助你吧。

我不会象许多文章那样让你去抵制IE6，这并不会帮助到你(迫不得已时)去兼容IE6；因为IE6依旧占有一定的市场份额，你无法放弃IE6。本文将帮助你来解决这个难题。

我查阅过很多资料来摘录这些解决方案（有些是我自己提供的），现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks，并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误，请联系我。

(查看全文»)

已有 43 条评论

小技巧：带分隔线左右布局的实现

2010年01月06日 | HTML/CSS


经常会碰到类似于这样的两栏（或多栏），中间有条分隔线。
由于左右两侧内容不固定，简单的使用border只能实现单侧的分隔线。

可以给左栏定义border-right，右栏定义border-left；
然后再给左栏设置margin-right:-1px;或者右栏设置margin-left:-1px;，使他们的border重叠，这样就可以实现完美的分隔线啦！

可运行示例查看效果：

html
<style type="text/css" >
* {padding:0;margin:0;}
body {font-size:12px;line-height:1.5em;}
a {color:#FFFFBF;text-decoration:none;}
a:hover {color:#FFFF77;text-decoration:underline;}
.wrap {width:350px;padding:10px;margin:30px auto;background: #132E35;color:#fff;overflow:hidden;zoom:1;-webkit-border-radius: 10px;-moz-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;-moz-box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;-webkit-box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;-khtml-box-shadow:0 0 3px #000000, 0 0 4px #000000, 0 0 3px #000000;}
.wrap h2 {font-size:14px;margin-bottom:5px;}
.wrap .pic {float:left;width:100px;padding-right:8px;margin-right:-1px;border-right:solid #425555 1px;}
.wrap .pic img {display:block;}
.wrap .content {float:left;width:233px;border-left:solid #425555 1px;text-indent:2em;padding-left:8px;color: #DCE4E4;}
</style>
<div class="wrap">
	<h2><a href="http://www.vfresh.org/" title="">粉丝站预测《暗黑3》第五职业 盗贼或将回归</a></h2>
	<div class="pic">
		<img src="http://www.vfresh.org/wp-content/uploads/2010/01/d3.png" alt="" title="" />
	</div>
	<div class="content">
		两个粉丝站的预测结果可算不谋而合，如果不出意料的话，暗黑3的第五职业可能是射手与盗贼的结合体。 <a href="http://www.vfresh.org/" title="">[详细内容]</a>
	</div>
</div>

注意：此法在非IE中无法实现dashed/dotted等非直线(solid)的分隔线，因为这些虚线无法完美地重叠，而且各个浏览器的错位方式都不一样，所以不建议在这些浏览器中使用这个方法操作虚线。但IE浏览器中是可以完美重叠的。

已有 5 条评论

2010

2010年01月04日 | 我的生活

回顾2009：

  • 一大半年的时间，都耗在了感情方面；但非常幸福地，找到了我的终身伴侣。
  • 又换了一个公司，但还是往好的方向走了；同时自己浮躁的心思也开始被安抚下来，寻求一个好的发展机遇是我现在的目标。
  • 专业技能水平仅在年末有所提升。
  • 工资一如既往的跑不过GDP。
  • 姐结婚了，而且2010年我就有虎崽侄子了。
  • 父母健康。

2010目标：

  1. 个性方面还需要改变，还需要磨练；我需要更加主动，更加胆大。
  2. 学习php/mysql，入门即可。
  3. JavaScript深入学习，尝试完成一年前构想的框架；目的只是为了提升js能力。
    （可选的：js游戏开发）
  4. 提升英文阅读能力。
  5. 为了加快工作效率，学习一门能快速开发的桌面程序语言（flex/air）以及batch script
  6. 本命年该结婚了。
已有 0 条评论

合理隐藏文字

2009年12月25日 | HTML/CSS

一般我们显示艺术性文字是使用图片替换文字的方法
绝大部分网站都是使用直接隐藏掉文字的方式：

html
<style>
.logo{
	display:block;
	height:31px;
	width:30px;
 
	text-indent:-999px;
	background:#464646 url(http://www.vfresh.org/wp-admin/images/wp-logo.gif) no-repeat;
}
</style>
<a href="#" class="logo">vfresh.org</a>

这样，我们成功的隐藏了文字，并且在css未能加载时能正常显示文字。

但是在成功加载css后，如未能成功加载图片或者图片加载得很慢，这个部分都会显示一片空白。
whatisthis

为了避免这个问题，我们可以使用一个空白标签（如）浮动于文字上层并填充图片
同时我们可以对文字层格式化，使之接近于图片的显示效果。
这样在图片没有显示出来之前，都由文字这个强力后备顶着！~

html
<style>
.christmas {
	position:relative;
	width:304px;
	height:149px;
	line-height:25px;
	background:#1E3151;
	color:#CCE8F3;
	font-size:14px;
}
.christmas span {
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	width:100%;
	background:url(http://www.vfresh.org/wp-content/uploads/2009/12/bestwish.jpg) no-repeat;
}
</style>
<div class="christmas">
	Best Wishes for Christmas & the New Year!
	<span></span>
</div>

但这样做的缺点是：
1.需要一个填充图片的标签，需要更多的选择器来进行样式控制。
2.图片加载完成时替换掉文字的视野时，会有所突尤。

但为了让用户更快的预览到信息，这点缺点，在必要的时候确是大可忽略的，特别是游戏站点。

已有 2 条评论

zencoding(HTML) for EditPlus v1.0

2009年12月15日 | HTML/CSS

新版本v1.1请见：http://www.vfresh.org/w3c/914

今早看到前端观察翻译的《Zen Coding: 一种快速编写HTML/CSS代码的方法》
对这种编辑方式很感兴趣，但自己熟知的EditPlus并未有此插件
遂研究了下，做出了简单功能
目前只能通过选取片段来生成html

找不到EditPlus的接口信息….似乎没有接口.

点此下载zen code for EditPlus

设置方式：
zencode-for-editplus

设置参数文本：
命令：WScript.exe "D:\editPlus\app\zencoding\zencoding.wsf"
（红色下划线部分为插件放置路径）
参数：$(CurLine)||$(CurSel)
初始目录：$(FileDir)
勾选运行为文本过滤器：替换

已有 25 条评论

使用css给图片添加阴影

2009年06月24日 | HTML/CSS

一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？
我们可以采取“视觉欺骗大法”——定义渐变边框来实现

示例代码：

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<style type="text/css" >
body {background:#2e334d;}
img {border:none;}
a.pic-shadow {display:inline-block;zoom:1;padding:1px;background:#262a3f;border:solid #2b3048 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
a.pic-shadow img {padding:1px;background:#13151f;border:solid #1e2132 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
</style>
</head>
<body>
<a class="pic-shadow" href="#" title=""><img src="http://www.vfresh.org/wp-content/uploads/2008/11/mxlineage.gif" alt="" title="" /></a>
</body>
</html>
css
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

上面这段定义是各标准浏览器中圆角定义，用以更专业地欺骗眼睛

颜色代码可以在ps中做好外发光效果后拾取。
我上面的效果是[柔和]、[扩展0]、[大小5px]、[颜色#000]其余默认

当然了，特殊要求的话可以使用ie的滤镜来实现更华丽的阴影
反对滤镜主义者飘过……你们自己gg去

已有 0 条评论

搬家

2009年05月19日 | 杂

vfresh.cn 被我那无用记忆能力给废了。

不记得当初在哪注册的，于是找到新网，于是新网给我下级商的联系方式，于是下级商给我下下级商的联系方式……希特！就个破域名而已，弄这么麻烦，cn还真TM麻烦。遂放弃cn——我很爱国的！~此次是逼于无奈的！~

拾起org域名，嗯，开始教育事业

有空了把博客再好生捣鼓下了。

已有 2 条评论

固宽背景图居中错位的问题

2009年03月02日 | HTML/CSS

在 IE/FF/OP/Safari/chrom 中运行下面代码，然后将页面收缩至小于980px

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>test</title>
<style type="text/css" >
body {background:url(http://www.vfresh.org/wp-content/uploads/2009/03/test.gif) top center no-repeat;}
#trunk {width:980px;height:100px;margin:0 auto;}
</style>
</head>
<body>
<div id="trunk">
	testtest!~~~~~~~~~
</div>
</body>
</html>

会发现在FF/OP下背景图错位了，而IE/chrom/safari下是正常的。

可以使用以下hack解决这个问题：

css
body {display:table;width:100%}
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>test</title>
<style type="text/css" >
body {background:url(http://www.vfresh.org/wp-content/uploads/2009/03/test.gif) top center no-repeat;display:table;width:100%}
#trunk {width:980px;height:100px;margin:0 auto;}
</style>
</head>
<body>
<div id="trunk">
	testtest!~~~~~~~~~
</div>
</body>
</html>

这个bug触发的条件：
1.主容器未定宽度或宽度为100%
2.主容器背景属性符合：background-repeat:no-repeat;background-position:center 0;(不平铺、横向居中)
3.子容器有定义宽度

原因：FF/OP是将body的总宽度定为了当前浏览器的宽度
也就是说，当浏览器缩小至800px的时候，FF/OP将body的宽度设为800px，再将body的背景图按照宽度800px居中放置，而body的子容器#trunk是980px，冲破了body，这样就导致了错位的问题。

这个问题在所有未定宽度或宽度为100%的容器内都有发生。
对于非body元素，我们可以使用以下方式修正：

css
div {min-width:980px;}
已有 0 条评论

JavaScript选项卡

2008年12月29日 | JavaScript

点此查看效果

点此下载

通过取连接的hash值(“#”后面的)来实现tab切换，具有良好的可用性，实现结构行为相分离。

js调用方式：catTab(el,args)

参数说明：

el：目标元素，可以是单个id值/对象也可是多个id值/对象组成的数组
args：参数组{
focusClass:导航连接高亮样式，默认为"lh",
mode:鼠标事件，默认为"mouseover",
ajaxLoad:是否是ajax方式，可用值为“true”、“false”,
ajaxWrap:ajax方式时，主层对象或id,
ajaxLoading:ajax加载进行时执行的函数，第一个参数为目标层,
ajaxLoadsucc:ajax加载完成时执行的函数，第一个参数为获取的数据(responseText)，第二个参数为目标层,
ajaxLoadfail:ajax加载失败时执行的函数，第一个参数为目标层
}
普通示例：

javascript
catTab('TabDemo',{
	focusClass:'lh',
	mode:'mouseover'
});

ajax方式示例：

javascript
catTab('TabDemo_3',{
	focusClass:'lh',
	ajaxLoad:true,
	ajaxWrap:'AjaxTab',
	mode:'mouseover'
});

结构层主要在于导航栏的书写：

html
<ul class="tab" id="TabDemo">
	<li><a href="http://www.vfresh.org/#d1" title="">导航1</a></li>
	<li><a href="#d2" title="" class="lh">导航2</a></li>
	<li><a href="http://www.vfresh.org/" title="">导航3</a></li>
</ul>

“导航1”对应显示id值为“d1”的层(href值#后的值)
“导航3”无对应层，无切换效果
导航1和导航3在非click触发导航情况下可打开“http://www.vfresh.org/”

默认显示的tab为设置了高亮className的连接对应的层，如上例默认显示导航2对应的层“d2”
如未设置高亮className，则默认显示第一个导航连接对应的层“d1″

后期将会考虑做以下扩展，记录下：

  1. 鼠标移动触发加上延迟
  2. 可通过window.location.hash的值来显示对应的层
  3. 优化点击显示tab的方法”showTab”
  4. 可移除/添加tab
已有 1 条评论

剑侠3 – 落花辞

2008年12月24日 | 杂

视频见内页

非常期待…可惜得到消息太晚了，封测号没弄到>.< 贴几张游戏效果图过下眼福，98GT的
剑侠3 画面 剑侠3 画面 剑侠3 画面

一直都很想有一个以中国武侠为背景的史诗级游戏，之前看九州的时候想过一些设定，有时间了整理下发给西山居，希望能有所帮助
(查看全文»)

已有 0 条评论
2/812345...最早 »