并不是每一个浏览器都可以正确显示设定的CSS,那有什么办法可以让一些CSS使每一个流行的浏览器都可以一致的显示出网页。哈哈,世界上真的有这么好的事情,可以将一些不兼容的情况统一,这一类都叫做CSS hack。我下面就简单得介绍一个CSS hack。
在任何标准兼容的浏览器中,针对包含其它元素的元素,其总宽度的计算需要结合这些容器的宽度以及它们的padding和border来考虑。这也就是说300像素宽的容器的实际总宽度为:300像素加上padding和border。这就是计算元素的总宽度的方法。
但是,IE5和IE5.5并不是这么计算的。它们将从width中减掉border和padding的宽度得到容器的真正宽度。也就是说,300像素宽的容器最终并没有300像素。如果padding设定为10像素、border设定为10像素,那么容器的真正宽度只有300-10-10-10-10,即260像素。举例说明如下:
-
#Sidebar{
-
width:300px;
-
padding:10px;
-
border:15px solid #000;
-
}
对于这个框模型,其总宽度为border-left + padding-left + width + padding-right + border-right,其等于15+10+300+10+15,即总共350像素。但是对于IE5和IE5.5来说,其总宽度为300像素。幸运的是有一些天才解决了这个问题,我们来看看是怎么样解决这个问题的。
-
#Sidebar{
-
padding:10px;
-
border:15px solid #000;
-
width:350px;
-
voice-family:"\"}\"";
-
voice-family:inherit;
-
width:300px;
-
}
-
html>body #Sidebar{
-
width:300px;
-
}
这个就是框模型hack,首先IE5和IE5.5会对宽度进行相应的调整,接着使用voice-family,由于它不是一个可视化的Css属性,它将不会影响最终显示。但是该规则加上了一些调整的语法,从而使得IE5和IE5.5错误的认为这个声明将改写这个选择器的声明。
后面的html>body #Sidebar{width:300px;}这条语句是为了一些Css2兼容的浏览器(比如Opera浏览器)将不执行这些上面“迷惑”性的语句,所以要加上最后面的一句。
分享到:
相关推荐
css 浏览器兼容性div 布局 收集了大量css浏览器兼容性代码
1.6.5 学习CSS布局比表格困难吗 1.6.6 CSS布局是否意味着必须手写代码 1.6.7 什么叫网站重构 1.6.8 使用Web标准之后就不再存在兼容性问题了吗 1.6.9 有没有Web标准方面的优秀图书或网站 1.6.10 使用CSS设计只能做出...
【基础一】DIV+CSS的叫法是不准确的 【基础二】使用Table布局是不明智的 【基础三】xHTML+CSS与SEO 【基础四】CSS如何控制页面 【基础五】CSS选择器 【基础六】CSS选择器命名及常用命名 【基础七】盒子模型 【基础八...
9.3.1 div+CSS布局的优点 200 9.3.2 div+CSS布局的缺点 201 9.3.3 何时使用TABLE 202 9.4 一列布局 203 9.4.1 一列固定宽度 203 9.4.2 一列宽度自适应 204 9.4.3 一列宽度居中 205 9.5 二列布局 206 9.5.1 二列固定...
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用_style这样的命名,可以让IE外的大部分浏览器忽略这个样式的定义。这篇文章主要为大家介绍了css布局命名时的注意事项,需要的朋友可以参考下
本人从事网站开发差不多四年时间,开发过程中反复会遇到CSS问题,兼容性、hack技术、DIV布局等,时间长了就随笔记录下来,现在看看还是值得分享一下的。
(从DIV布局到页面标签使用,参照GOOGLE搜索引擎规则,易于收录。) 4、便捷的数据修改形式:需要修改的地方只需登陆后台、或者在前台Diy操作。(数据调用修改方式便捷,事实上,这是应该的。) 5、100%的绿色。...
1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...
(从DIV布局到页面标签使用,参照GOOGLE搜索引擎规则,易于收录。) 4、便捷的数据修改形式:需要修改的地方只需登陆后台、或者在前台Diy操作。 (数据调用修改方式便捷,事实上,这是应该的。) 5、100%的绿色。...
CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div: <div class=clear></div> .clear{clear:both;} 更为优良的 CSS 代码是: .clear:after{content:.;display:block;height:0;clear:...
传统的布局方式一般都是基于 div 盒子模型,利用 float, position, display 来进行布局。 每个前端开发者对这些布局方式都非常熟悉。对一些特殊的布局来说,使用这些属性并不方便,由此还衍生出各种 hack 方案...
使用JSX的声明式布局。 合理的默认值。 对单元格宽度使用任意分数。 再也不需要12列紧身衣了! 从给定的单元格大小推断行。 不需要显式的行或额外的<div> ! 可自定义的单元对齐,包括无hack的垂直对齐! 可自定义...