CSS3中的box-sizing属性
来源:asp之家 发布时间:2010-04-05 21:52:00
说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内。这为前端工程师的工作平添了不少麻烦,几户每个需要定义尺寸的 box 都要思量一下:是否触发了“盒模型 bug”?
同时,由于另一撮浏览器对标准的遵从,我们在精确定义一个在有限空间内显示的 box 时,也需要计算一下:留给它的空间只有那么大,刨去 border 和 padding,我们该把它的 width 写成多少呢?
这种情况在 CSS3 时代有了改善,得益于这个叫做 box-sizing 的属性,它具有“content-box”和“border-box”两个值。
定义 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准;
定义 box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6 相同;
为什么说这个属性“迟来”呢?IE 对于盒模型的解释固然不符合 W3C 的规范,但是也有它的好处:无论如何改动 border 与 padding 的值,都不会导致 box 总尺寸发生变化,也就不会打乱页面整体布局。而在 Firefox 等现代浏览器下,如果我们要改变一下 padding 的值,就不得不重新计算 box 的 width。现在 IE6 寿终正寝,这个 CSS 属性未免有些姗姗来迟。
试用这个新属性,Firefox 请使用 -moz-box-sizing,Safari / WebKit 请使用 -webkit-box-sizing,Opera 直接用 box-sizing 即可。
猜你喜欢
- 在web开发中经常遇到多关键词对对个字段查询,我一般是通过动态数组来实现的。当然多个关键词的一般是用空格或,隔开,我这几假设多个
- 很简单的方法,但很实用。用过新浪邮箱的朋友应该会知道此脚本的效果。如果您提交的数据处理时间很长,用这个做为提示很不错的.将下面的代码复制到&
- 站长们是不是还在为空间不支持域名绑定到子目录而发愁呢?买了个便宜也不错的空间,用的还满意,准备再开几个网站,却发现空间程序太落后,无法支持域
- 字体大小CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度为一个数值,前面可能带一个可选的加(+)或减(-)标记符。另外,该数值
- 众所周知当前(甚至接下来的几年)最酷的东西是iPhone。不仅仅是因为iPhone看起来不错,它们在网站方面也很不错。而且,更重要的是,很多
- 大家一定使用过 phpmyadmin 里面的数据库导入,导出功能,非常方便。但是在实际应用中,我发现如下几个问题: 1、数据库超过一定尺寸,
- 如何只取数据库的前3条记录?怎么控制只取得前3行数据 这要看是什么类型的数据库了,对于Access和SQ
- 有。试试下面这个程序:saveip.asp<%Server.Scripttimeout = 1000On 
- 篇首语:原来改mdb为asp就能防下载是鬼话。 引子:昨天和animator试验了一下,把data.mdb文件改名为data.as
- 很神奇的一个晚上,居然在以前老同事的群里跟同事讨论起CSS的东西来了,不过很意外的还是有收获。在IE中常常会碰到如果将容器定位后,出现容器内
- 在seclists中看到一个很惊人的thread:http://seclists.org/oss-sec/2012/q2/493MySQL爆
- 有时候,规划师(或需求、交互)把内容呈现的框架草图搭建好后,就直接“丢”给了设计师,让设计师在画好的框架里去美化内容,出来后的效果,往往达不
- 在修改后的 《闲谈 Web 图片服务器》 一文中也提及了"IE 浏览器的连接数问题",这也是个有趣的话题。值得补充记录一
- 防止一般的采集以及小偷读取,加在顶部。同理,可以改造成JS脚本。下面的方法是通过选择同一IP的访问频率来达到防止采集的目的,就是可能也把搜索
- 最近随着狂风计划的席卷,我也终于开始橱窗产品位列表展示的编码工作,这只是一个改进项目,因此有原代码可供参考。但是当我打开原代码模板的时候便愣
- 装了 Access 2003 安全更新 (KB981716) 之后 Access 打不开,office2003-KB981716-FullF
- 如果我们想对一个表的每一行做出比较复杂的操作,大多会想到用游标,本文中,我们将换一种思路,用SQL Server 2005中的新函数ROW_
- CREATE TABLE table1( [ID] [bigint] IDENTITY(1,1) NOT NULL, [Name] [nva
- 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要
- 一直很想就搜索结果页写一些心得文章出来,甚至连目录都整理好了可是就是一直没有动手。因为总是觉得还差很多东西需要研究需要分析需要验证。最近也组