忙了好几天，以至于看到电脑有种莫名的心理障碍。明天就是伟大滴国际劳动节了，下午不太想工作，而是想整理一下这段日子接触过的一些比较有用的，常用的脚本。光知道完成任务而没有总结和积累是不行滴。因为一旦停下来，就随时有可能忘光光。

图片等比例缩放

DIV等高处理

Javascript 切换页面 CSS 样式

图片放大镜效果

1KB的JS TAB脚本 帕兰映像

图片先模糊后清楚 以前一直不知道这样做的意义所在，现在终于懂了，笨。

项目组同事反映前阵子做的一个登录界面在IE7下登录框神秘消失了。自己查看了一下汗了一把，不但IE7不能正常显示，FF3.0.3也是如此。

翻查了之前的技术博客记录和相关资料，发现原来的解决方法在IE7浏览器下仍出现问题，但主要思路是不变的：

标准浏览器如 Mozilla, Opera, Safari 等.，可将父级元素显示方式设定为 TABLE(display: table;) ，内部子元素定为 table-cell (display: table-cell)，通过 vertical-align 特性使其垂直居中，但非标准浏览器是不支持的（IE6及IE7都会出现问题）。非标准浏览器只能在子元素里设距顶部 50% ，里面再套个元素距顶部 -50% 来抵消。

小修正了一下，整理如下：
针对的问题主要是未知高度垂直居中。 XHTML：

<div id="outer">
  <div id="middle">
    <div id="inner" class="greenBox">测试用的未知高度div。</div>
  </div>
</div>

CSS： 

body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer{height: 100%;width:100%;overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}/*for FF*/
#middle{position:absolute;top:50%;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}/*for FF*/
#inner{position: relative;top:-50%;width: 250px;margin: 0 auto;}
*+html #outer[id] {position: relative;} /* for IE7 */
*+html #middle[id] {position: absolute;} /* for IE7 */
.greenBox{background-color:green;border:3px solid yellow;padding:10px;}

另：这里有一句话解决IE8兼容问题的，没试过，地址在这里：http://eroading.com/web-frontend-develop/ie8-compatible-solve

常常还是会遇到一些认识或不认识的，对互联网有着激情和梦想的人。看到他们时觉得很感慨。我对一切坚持自己梦想的人都心存敬意，无论他们在现实中成功与否。我问自己跟他们之间，除去能力本身（我觉得其实每个人的智力水平相差都不远，关键不在这里），区别究竟是在哪里。后来我觉得，区别在于对于互联网也好，对于这个世界也罢，我从来都只是一个——没有梦想的梦想者。28年来我的目标一直是零，我的梦想也是零。我对互联网有感情，对技术有热情，我也懂得在理想的状态下，为用户创造价值，就是在为自己创造价值，但是这一切似乎都跟我的梦想无关，换句话说我没有勇敢实践的绝对激情。我只会是在某个时期，某个际遇底下，用尽全力，什么也不管不顾地去做到最好，为的是某天可以毫无后悔地放弃它。

原文地址

在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。

题目的难点在于两点：
垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
 *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
 *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;}

<div class="box">
<img src="img_link" />
</div>

当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：

• 《Vertical centering using CSS》
• 《Vertical centering using CSS》（标题和上同，内容不同）
• 《CSS List Grid Layout》
• 《Vertical Middle》 通过添加一无语义图片来解决图片居中问题，源自韩国Yahoo

画一个圆角矩形，添加上需要的样式。

选择转换点工具，选中左下角的锚点。右键 – 自由变换点。

在菜单栏更改参考点位置为左下角。编辑 – 变换点 – 水平翻转。

对圆角矩形右边做同样处理，就得到上图的效果。这种效果多用于导航菜单。