口碑网UED团队

借口碑网首页改版之际，抽离一些自认为这次在首页前端开发中一些有用的东西拿出来和大家探讨一下。口碑网首页改版比较勤快，也不知道这版首页会持续多久，啥时候改版的话，本系列文章自动终止。

今天说说清除浮动，clear float。

常规清除浮动，只要在需要清除的那个元素加上clear:left、clear:right或者clear:both

但是有两个情况下，靠以上这种简单处理不行。

第一种情况，父元素有border或者background等视觉体现，而子元素都是float元素的时候，需要对子元素结束的时候对float做清理，否则视觉显示不出来。第二种情况，也是基于视觉的考虑，第一个元素的子元素做了一些浮动，紧接着的第二个元素有border要显示，但是如果直接在自己身上加clear，会导致第一个元素的padding-bottom后者本身的margin-top失灵，而因为要显示border，不好用padding-top来控制与第一个元素的间距。这些时候可以用这个经典的清除浮动class加在父元素上来清除自身的浮动：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {zoom:1;}

第一种情况的示例看下图：

第二种情况的示例看下图：

你可以访问口碑网首页使用firebug展开dom节点找到相应的位置看。

原版（网上搜索clearfix到处都是）对IE/MAC提供了支持，并且用height:1%对IE进行hack。我对那部分做了修改，用了zoom:1来取代。

另外最近不小心看到网上一个新方法，这样子也行…

.clearfix {
overflow:auto;
zoom:1;
}

在工作中是否遇到这种情况。。
1.写好的一个html片段。暂时不需要了。。过一会又有人跑过来跟你说，刚才的那段还要。。。又过了一会他又说还是不要算了。。。。。囧。。。
2.页面错乱。。怎么查都查不出原因。。没办法只能用最土的方式。。删html逐一排查。。。

对于这类情况，我们多数是用注释去解决。。。但html复杂的注释语句真的是让人无法忍受。。。试想在第一种情况中。反复的敲打“<!–  –>”是多么的让人浮躁啊。。

来搞个注释开关吧，来快速打开和关闭注释。。。。。

在需要设置注释的上下各写两个空注释。基本格式如下图

当我们要打开注释开关，注释掉文本的时候，只需要将文本上面的空注释的结束>删除即可。见下图。

想反的当需要关闭注释的时候，只需要再把>补上即可关闭。。。

是不是很有意思。。 。。不过我更是习惯通过删除“-”来控制开关。 因为打>的时候还需要按住shift。。。太累。。。

在让我们看看其他的注释开关。 继续阅读本篇日志 »

这贴比较长，没有耐性的朋友请直接拖到帖子末尾的代码示例，或者直接去玩我提供的Demo。

Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

下面开始讲：

通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。
我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。

这篇文章，希望在这两个方面再做一些深入。

可能有人还没接触到这个问题过，先说明一下，什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个： 继续阅读本篇日志 »

几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面，是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的，能正常显示的HTML邮件。
继续阅读本篇日志 »

基本上快被这个问题搞疯了，症状如下

症状描述：在ie下（6或7，8没有试过）当出现中英文混排，都采用默认字体时，并使用 li 列表做float时，会出现如上图的症状，文字排列上下不对齐的情况。影响了布局的美观性，造成上图情况的原因是中英文的文字基线不同，arial字体的下边缘要比宋体（同为12号）低一个象素，上边缘比宋体矮两个象素，而且英文还有i,y这种上下基线不同的情况。所以当中英文混排对齐时，就会出现明显的高度差异，使排版不均。可见放大图。

采用中英文字均使用宋体的方案

可以解决文字排列不对齐的情况，但宋体英文字是衬线字体（Times New Roman即是英文中的衬线字)，字型紧凑，细节较多，排列在一起很醒目，但在连续成文时，容易造成辨识困绕，看错行的情况。关于衬线字体的优缺点，请见这篇文章。相比之下，表示英文还是使用无衬线字体更美观大方。

解决方法一 “饺子”童鞋的 发现。

英文采用tahoma字体–宋体，arial及 tahoma字体比较–arial与tahoma的无衬线体比较精致

当中英文混排时，使用tahoma字体的情形

中英混排，纯中文组合的行高都一致了，但a在hover状态下 下划线与中文粘联在一起

缺陷：使用tahoma字体时，在ie6及ie6以下版本，会导致所有中文字体链接的下划线会出现与字体粘连现象。淘宝使用的也是这一解决方案。相信大型项目，不同的人来共同完成一个页面的模块时，在统一的规范下，使字体更规范，减少错位，而采用带有下划线会出现与字体粘连的tahoma字体，是值得的

以下是携同大米童鞋 发现的。

英文采用arial字体，中文使用宋体。可在<a>标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。（不知道大范围中英文混排适不适用，有待后续校验。）

总结：感谢大米，感谢饺子，感谢YUI，感谢淘宝！

我们经常使用到a,button,input等标签，通过css加背景等方式来实现按钮的效果。但是要做一个通用的样式类，又能保证在各个浏览器下表现一致，还能有很好的扩展性的按纽可不就那么容易了。好了废话少说。进入正题。

首先我们选择a和button两个标签作为通用按纽的外包装器。主要考虑到，在ie6不支持a以外的:hover伪类，使用a就可以对按钮做悬浮状态，这就是为什么选择他们做为最外层的包装器而不是span或者其他的标签。为什么不用input下面会详细说到。

先来认识一下button的类型(type)，button，默认的类型。submit，该可以用来提交表单，功能同<input type=”submit” value=”提交” />。reset，可以用来恢复表单默认值。如下

<form action="">
	<input type="text" value="I LOVE CHINA" />
	<button type="button">type="button"，我是一个默认的button,</button>
	<button type="submit">type="submit"，我可以用来提交表单</button>
	<button type="reset">type="reset"，我可以来恢复表单默认值</button>
</form>

之前说了，当button的type属性为submit的时候，同样可以对表单进行提交，那为什么要选择button,而不是input。原因有两点。

1. 表单中，在css中可以通过标签名字来作为选择器，对输入框和按钮进行样式控制，在不支持css2属性选择器的浏览器中，这点非常重要。
2. 可以在button内甚至可以嵌入div，p这样的标签标签，其扩展性那是相当的好。

但如果想让button在各个浏览器和各种操作系统下表现一致。还是一件比较让人头疼的事情。 继续阅读本篇日志 »

首先先对行内元素（inline elements，比如span,a,b等。）和块元素(block elements，比如div,h1,p等)进行一下知识回顾.简而言之，它们的区别可以分为下几点

1. 块元素会自动在末尾加一个换行，而行内元素不会。
2. 块元素可以定义自身的高度（width）和宽度(height),而行内元素不可以。
3. 块对象定义的自身垂直边距可以改变行高，而行内元素虽然可以定义但改变不了行高。

在前端开发中，我们遵循结构，表现，行为相分离。所以将修饰型图片利用css的background把它写在表现层中。那最常见的就是icon的应用。如：

去我的flickr相册。这是利用行内元素的左侧内间距（padding-left）实现的icon+文字的组合。

但有时候，我们还需要另外一种表现形式，只是单独的icon而不需要文字或者链接，并且是图文混排。也许你想只要把span里面的文字删除不就可以了么，实际上并非如你所愿。

。如果你现在在ie下，肯定什么也看不到。

原因是行内元素在内容为空的情况下,ie认为它的width为0。

 ,现在在ie下可以看到了。

根据行内元素的特性，并不能为其设置一个宽度来解决，所以只能在里面加一个毫无意义的空格用来占位，来生成一个高度值，但在无css的条件下（在spider的眼里），无法得知它为何物。如下:

<a class="icon-flickr"> </a>

所以这样的解决方案让人无法接受。

使用inline-block就可以解决这个问题 继续阅读本篇日志 »

最近才知道intype能支持中文了…

真是太落伍了….不过默认的只能用”宋体”…代码看起来简直别扭死了..

搜了下还真有方法能改.就是修改user目录下的preferences.itConfig文件.

font_name改成”微软雅黑”.

在加上YUI的语法加亮和函数提示包

http://intype.info/download/bundles/JavaScript_YUI.itBundle.zip

爽了…..

轻量级的IDE,这次真的可以跟EDIT PLUS说拜拜喽~

我们最常用的有四种选择方法，

Id规则选取，比如
button#button{}
#urlBar[type=”text”] { }
div > p > span#demo{}

class规则选取，比如
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked=”true”] { }

Tag规则选取，比如
td { }
div > p { }
input[type=”checkbox”] { }

统配选择器，比如
*
：after
[hidden=”true”]

他们都是从最右边开始匹配，直到最左边整个规则结束。
这样就存在一个问题，比如说最右边的规则已经能确定你要选取到元素。
那更多的规则匹配就造成了性能上的浪费。
比如说div > p > span#demo{}
div > p > span根本没有意义。

继续阅读本篇日志 »

在IE6下使用浮动可能会出现文字重复的情况.

引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决

PS:ie6真恶心