Flex Home » CSS http://flex.desizen.com 又一个 flex 博客 Thu, 01 Dec 2011 03:33:47 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 1Kb CSS Grid:像玩拼图一样进行布局 http://flex.desizen.com/1kb-css-grid/ http://flex.desizen.com/1kb-css-grid/#comments Mon, 03 Aug 2009 01:08:56 +0000 joel http://flex.joelove.cn/?p=247 其实我们在写css的时候,最开始的问题就是进行布局,普通的企业站好像还好一点,挺常规化的布局就可以搞定,但是稍稍遇到点复杂的就会显得很麻烦,因为要为这一块单独的去进行布局修改等重复性工作.做这一行的最烦的事就是重复性的造轮子,不过现在好了,一切都可以很轻松的搞定了,因为有了一个现成的1Kb CSS Grid,这是一个CSS框架,但是它非常的轻量级,就像名字一样,只有1kb.所以,我们很容易把它拿出来集成到我们自己的Framework中,毕竟通用性的CSS Framework不是适合每个人或TEAM的,适合的才是最好的.

1Kb CSS Grid的特别不只是在于它的小巧而具备良好的可移植性,我的理解它的强大之处更在于它的高度自定义.这里的高度不是说的height,而是level.上到了这个1Kb CSS Grid网站,你就可以看到样式按钮,按照自己所需进行设置一下,然后down下来,即可,真的是非常之强大与方便.

]]> http://flex.desizen.com/1kb-css-grid/feed/ 2 完美的IE6 position:fixed http://flex.desizen.com/ie6-position-fixed/ http://flex.desizen.com/ie6-position-fixed/#comments Mon, 20 Jul 2009 06:52:39 +0000 joel http://flex.joelove.cn/?p=230 这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于需求的目标,但是不完美.那么如何解决这一问题呢?

造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里).
知道了原因,我们就大概知道如何解决了:

<!--[if IE 6]>
<style type="text/css">
	html{overflow:hidden;}
	body{height:100%;overflow:auto;}
	#fixed {position:absolute;}
</style>
<!--[endif]-->

没错,就是加上这样的一段code,现在看看完整的页面code:

<!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" />
<title>IE6 position:fixed</title>
<style>
* {
	padding:0;
	margin:0;
}
 
#fixed {
	background-color:#ddd;
	border:1px solid #aaa;
	position:fixed;
	right:0;
	top:0;
}
</style>
<!--[if IE 6]>
<style type="text/css">
	html{overflow:hidden;}
	body{height:100%;overflow:auto;}
	#fixed{position:absolute;right:17px;}
</style>
<!--[endif]-->
</head>
<body>
<div style="height:2000px"></div>
<div id="fixed">
  FIXED
</div>
</body>
</html>

from: 随网之舞

]]> http://flex.desizen.com/ie6-position-fixed/feed/ 15 CSS hack 汇总 http://flex.desizen.com/css-hack-all/ http://flex.desizen.com/css-hack-all/#comments Mon, 20 Jul 2009 03:05:05 +0000 joel http://flex.joelove.cn/?p=202 说是CSS hack 汇总其实有点不妥,主要是用以记录CSS对于不同浏览器之间的区别对待.为啥不妥呢?因为平时很少用到,说也奇怪,我写出来的CSS code,从firefox出来以后,很少再对IE进行hack,例如写 flexhome 的时候,就没太大的变化,莫非是我写的比较标准? :lol: 现在,就把我所学到看到的东西整理出来供大家选择.若有错误的地方还请您帮忙斧正.ie6 must be die,我希望以后都用不到 css hack.

对于CSS hack,写法大致有两种方式,一是利用外部引入的方式;二是直接写在通用css文件里.第一种方式呢,是利用IE的if条件进行Hack,我很喜欢这样的写法(值得说明的是:你得写上DTD,否则会出现一些莫名其妙的问题):

  • <!–[if IE]> <![endif]–>  :所有的IE浏览器都可识别
  • <!–[if IE 6]> <![endif]–> :指定IE的版本
  • <!–[if lt IE 7]> <![endif]–> :所有小于版本7的IE浏览器

这样写的好处呢,就是简单明了,不需要什么复杂的逻辑顺序.缺点就是使得 http requests 数量上升,要是负载超大型的应用上是不适合的.题外话,谷歌的网站好像是针对每一套不同的浏览器都有单独的一套css,chrome和safari是一个.

第二种 css hack 方法:

  • IE6 : select {_background}

    • 这样写是ie6特有的下划线支持,注意是写在属性的前面,而不是选择器.

  • IE6,IE7 : *select或select {*background}

    •   这样写是针对的ie6和7,8没试过,不过据说ie8不能识别 “*” 和 “_” 的hack.

  • IE7 : *+html select{background:#000 !important}

    • 经过我的测试,html可以省略掉但是优先级就不好判断了,推测这个html只是元素html.IE7认识 “*+html” 也认识 “!important” 优先级 : (*+html + !important) > !important > *+html.

  • firefox等其它浏览器: select{background:#000 !important}

    • !important的优先级大于没有此关键字的.

通常,hack都是按照firefox->ie6->ie7->其它浏览器 这个顺序来进行的.因为我们写的css是按照标准去写的,所以当然首先你得在FF浏览器下面显示正常了才能继续下一步.而写的时候也一样:正常的FF的写在前面,不正常的IE6的写在后面.至于其他的针对标准浏览器之间的区别对待方法就不太了解了,因为我写完了以后在ff下面正常的情况下,在其他浏览器下面还没有遇到不正常过.每个浏览器都提供一些自己的私有属性,等待后续学习吧.

]]> http://flex.desizen.com/css-hack-all/feed/ 0