Tagged with " css"
Oct 11, 2013 - 前端    No Comments

clearfix的前世今生

在很久很久以前,清除浮动这个问题一直困扰着我。直到我写出这样一行代码。

.auto_height { 
  height:auto !important; 
  height:100%; 
  min-height:0px; 
  overflow:hidden; 
  _overflow:inherit;
}

这行代码兼容ie6,ie7,firefox2,firefox3。那个年代还没有chrome,还没有css3。我还在用着我的iphone1。那是一个兼容ie6是理所当然的年代。

直到有一天,我遇到了drupal6,发现自己的代码虽然管用,但看上去总是那么的土鳖。那个时候clearfix还不叫clearfix,叫clear-block

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear-block {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear-block {
  height: 1%;
}
.clear-block {
  display: block;
}
/* End hide from IE-mac */

看看人家的注释多么的高端洋气!
Read more »

Nov 14, 2012 - 前端    No Comments

Use Modernizr

modernizr.js是一个可以帮组前端了解浏览器特性,并写出渐进式增强css的js文件。
使用起来非常简单,首先在html的head区加入代码:

<script src="js/modernizr-2.6.2.min.js"></script>

这段代码一定要加在head关门标签前,而不能放在body关门标签前。

然后给html标签加上一个class

<html class="no-js">

其实这个class加不加都可以的,但如果真的碰到不能运行js的浏览器这个class就可以起作用了。

然后在浏览器里打开这个页面,可以看到:

Read more »