文章列表
最近一直忙于工作，修改BUG，很少有时间上来总结一些东西，实在抱歉，对于时间的管理上自己还是得加强，没时间不能做为一种理由。
提高用户体验关键在于细节。
经常会发现一些表单元素与标签对不齐的现象，如下图片所示：
做为专业者不能视而不见的，其实两句代码就能将对齐解决：
body{font-family:Tahoma;}
input,label{vertical-align:middle;}
其中font-family:Tahoma为关键点,当然你可以根据自已需要而更改，不需在BODY里控制font-family，可以定义一个class，运用到提示文字的容器里。
&l ...
一、禁止换行
white-space:nowrap;
overflow:hidden;
当文字内容过长，想以省略号表示可使用text-overflow:ellipsis,此法在FF下无效，但在FF下可以调宽度+ 伪类的方法即：
p:after{content:"...";}
这个方法有个弊端，当内容很少的情况下也会出现这个省略号，怎么解决呢？？？
二、强制换行
word-wrap:break-word;/*不断开英文单词*/
overflow:hidden;
word-break:break-all;/*断开英文单词*/
overflow ...
方法一：定义样式outline:none即可，但此法只适应于FF，IE不支持，在IE 下可使用其私有的html属性：hideFoucs，在标签的结构中加入 hidefocus=”true” 属性。
<a href="#" hidefocus="true">这里放置您需要的文字或图片</a>
方法二：针对于IE
.HideFocus {
hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
outline: none; /* for fir ...
前面一篇博文有讲关于display:inline-block在FF出现空白的解决方案，这篇博文主要讲解下display:inline-block的实际应用。
应用一如下图所示。当固定宽度，固定高度，向左浮动float:left就解决了。但是，这个设计中内容是可变的，也就意味着当内容增多，高度不一就会破坏这个布局。
你也许会想到每一行三个放在一个UL里，然后程序员3*N的循环，现在用display:inline-block来解决这个问题
<ul class="imgList">
<!--循环开始-->
< ...
自定义鼠标图案
.ablumInfo_style1{cursor:url("images/L.cur"),-moz-cell;}
<a href="#" class="ablumInfo_style1">自定义鼠标提示图标 </a>
其中url内是你自定义图案的路径，-moz-cell是FF的专有属性。
注意以下几点：
一、图片格式：cur格式与ani格式，可以用GIF Movie Gear软件将PNG，JPG，GIF格式的图片转化，其中FF不支持ani格式；
二、鼠标图片大小：32*32， ...
最近在优化页面时遇到的问题：在浮动里的绝对定位元素在FF下显示正常而在IE下被遮挡
FF显示效果：
IE显示效果：
#wrap{overflow:hidden;
height:1%;
}
#wrap li{float:left;
margin-right:12px;
height:120px;
padding:6px;
position:relative;
ist-style:none;
}
#wrap li .text{position:absolute;
left:120px;
top:8px;
background:#c ...
最近制作中有遇到过未知大小图片未知容器里底部对齐的效果，如下图所示：
有用到display:inline-block做这个效果，通过实践会发现在FF下相邻的inline及inline-block的元素而产生的莫名其妙的空白间距如下图所示：
这是因为，html中存在空格或者换行，就会有一个间距，就像两相邻的两个a，默认情况下也会有间距，解决的办法可以让相邻的inline及inline-block的元素没有空格。显然这样不利用查看结构。怎样有效的去掉这空白间距呢，方法如下两种。
方法一：利用letter-spacing属性，给外层容器的定义letter-s ...
一、单行文本垂直居中对齐方法
height:20px;
line-height:20px;
overflow:hidden;
注意：overflow:hidden不可省略，以上数字自定义，此法不适应图片
二、多行文本在未知容器内垂直居中对齐方法
padding-top:10px; padding-bottom:10px;
注意：以上数字自定义，此法不适应图片
三、多行文本在已知容器内垂直居中对齐方法
.valign{
border:2px #666 solid;
height:560px;
display:table-cell;
ver ...