YUI Grids CSS 解读
作者:blank 来源:蓝色理想 发布时间:2008-05-28 12:49:00
标签:css,grids,性能,浏览器
YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习:
1、布局的思想:使用 “负 margin(Negative Margins)” 技术
详细可参阅:《Creating Liquid Layouts with Negative Margins》
2、使用 em :当用户改变字体大小时,宽度同时改变。
技巧:用 13 像素来平分宽度(保留小数到千分位),而 IE 浏览器用 13.333 。
/* 750 centered, and backward compatibility */
#doc {
width:57.69em;
*width:56.251em;
min-width:750px;
}
57.69 = 750 / 13
56.251 = 750 / 13.333
注:《Setting Page Width with YUI Grids》 一文中提到:IE 下的 em 是宽度除以 13 ,再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px 的宽度是:56.301em(750 / 13 * 0.9759)。
此算法将在 YUI 的下个版本中换为上面的新算法(IE 浏览器用 13.333 )。
3、清除布局的浮动
针对非 IE 浏览器:
.yui-gf:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
而对于 IE 浏览器,使用了 zoom:1 来触发 haslayout。不过对于此 Nate Koechley 这样解释的:
Zoom is a non-valid attribute and so you’ll see warnings when you validate your CSS. I’m aware of that and think it is an acceptable tradeoff.
个人比较赞成他的想法:I think it is an acceptable tradeoff。
0
投稿
猜你喜欢
- 1.因为oracle 10g暂时没有与win7兼容的版本,我们可以通过对安装软件中某些文件的修改达到安装的目地。 a)打开“\ORACLE1
- MySQL支持的两种主要表存储格式MyISAM,InnoDB,上个月做个项目时,先使用了InnoDB,结果速度特别慢,1秒钟只能插入10几条
- 如果你能很好的理解我下面的一句话,那这些都不是问题了。asp是服务器端语言,它的作用是动态生成客户端浏览器所能识别的html css jav
- 分析当前用户下所有表的记录总数保证好用!begin dbms_utility.analyze_schema(user,'COMPUT
- SQL Server服务器的配置选项属于那种人们了解较少且经常误用的选项。当一个技术支持人员要求你按照某种方式调整一个选项、而另一个技术支持
- 英语原文地址:点此浏览新年开始了,来点猛料,放上15个漂亮的网页排版的demo,来欣赏一下。去年我也专门找了15个同类网站,比较受用户欢迎,
- 今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处,
- 这种情况在Access下可以通过,但SQL则不行,在百度搜索解决方法,发现N多人出现同样问题却找不到解决办法: 代码如下:set
- ACCESS数据库中Field对象的caption属性(也就是标题)是用来设置数据字段的标题,在正常的数据库设计中为了保持维护的便利性,许多
- 关于CSS中的命名规则(其实我觉得是XHTML元素的命名规则更加合理些)这个问题,已经有很多人在说了,其中也不乏一些真知灼见。不过这种东西也
- 阅读上一篇文章《WEB2.0网页制作标准教程(5)head区的其他设置》在开始正式内容制作之前,我们必须先了解一下web标准有关代码的规范。
- Function closeUBB(strContent) '*************************
- Memoization 是一种将函数返回值缓存起来的方法,在 Lisp, Ruby, Perl, Python 等语言中使用非常广泛。随着
- 在JAVASCRIPT中LEFT函数的等价函数:function left(mainStr,lngLen) {if&nb
- 给浏览器绑定事件有时候是非常痛苦的事情,不同的浏览器提供不尽相同的功能的同时,也提供了不同的事件。例如,IE 系列的浏览器支持 mousee
- 首先说明,伪造访问来路不是什么光明正大的事情,目的就是为了欺骗服务器。原本以为给 XMLHTTP 对象增加一个 Referer 的heade
- Dreamweaver MX 2004 试用试用心得:安装:选择工作界面(我选了默认的设计模式)初次启动,选择30天试用如果你也看到这个警告
- 前两天看见有人问静态网页加密问题,就写了这个代码稍微有些长,解释一下思路:加密时:先把用户的密钥A用md5加密为B,然后用B异或源文件S0得
- 译者按:我们时常能看到不同JavaScript库/框架之间的各种比较,但这次 YUI3 架构师和 jQuery 之父的直接对话却非常难得,也
- <% dim conn,mdbfile mdbfile=server.mappath("数据库名称.mdb") s