并不是每一个浏览器都可以正确显示设定的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(层叠样式表)和div(HTML中的一个区块元素)在网页设计中的核心作用。CSS是用于定义网页中...
5. **DIV布局实践**:如何使用DIV进行页面分区,创建复杂的布局结构,如两栏布局、三栏布局、自适应布局等。 6. **实战案例**:书中实例可能包含各种网页设计模板,如企业网站、电商网站、博客系统等,通过实际操作...
《精通CSS+DIV源码 第一章》是深入学习网页布局技术的重要篇章,主要涵盖了CSS(层叠样式表)和DIV(定义文档分区)的基本概念、语法以及在实际中的应用。这一章节通常会引导初学者逐步掌握如何使用CSS来控制网页的...
综上所述,"DIV+CSS10个模板(含内页)"是一个涵盖网页布局、样式设计、模板使用和自定义优化的综合学习资源,对于初学者和专业开发者来说都是宝贵的学习材料。通过深入研究这些模板,可以提升网页设计技能,并理解...
本文将详细介绍如何使用CSS hack来处理div布局在不同浏览器中的兼容性问题。 首先,让我们看看一个基本的CSS hack示例: ```css .hack { width: 600px; /* FF */ *width: 700px; /* IE */ } ``` 在这个例子中,`...
### CSS+DIV 教程详解 #### CSS 高度控制详解 在网页设计与开发过程中,CSS(层叠样式表)被广泛应用于控制HTML元素的布局与外观。本篇文章将重点介绍如何使用CSS来控制元素的高度,包括CSS高度的基础概念、自适应...
在构建基于 CSS+DIV 的网页布局时,浏览器兼容性是一个重要的考量因素,因为不同的浏览器对 CSS 规则的解析和执行可能存在差异。本篇文章主要探讨了一些针对 IE7、IE6 和 Firefox 的 CSS 兼容性技巧。 首先,我们来...
CSS(层叠样式表)与 Div 结合是现代网页设计中的常见技术,用于实现网页的布局和样式控制。Div 是 HTML 中的一个区块标签,通过 CSS 可以对其进行定位、大小调整、颜色设定等样式控制,从而构建出复杂的网页结构。...
在探讨“css+div在IE中兼容”的问题时,我们面临着一个历史遗留下来的挑战:Internet Explorer(以下简称IE)浏览器由于其版本迭代过程中对CSS支持的不一致性,导致在开发基于CSS布局的网站时,需要特别注意跨浏览器...
以上就是学习 CSS+DIV 的十步骤,从规划网站到创建模板,再到具体的样式设置和浏览器兼容性处理,每一步都是构建专业网页布局的基础。随着实践和深入学习,你将能够掌握更多高级技巧,如响应式设计、过渡和动画、...
通过以上步骤,新手可以逐步学习并掌握div+css页面布局的基础知识,从而创建出符合设计要求的静态网页。随着经验的增长,还可以进一步探索更高级的布局技巧,如网格系统、Flexbox或Grid布局,以及更复杂的交互效果。
《DIV+CSS布局大全》是一本深入探讨网页布局技术的专业书籍,主要针对使用HTML的`<div>`元素结合CSS(层叠样式表)进行页面设计和布局的方法进行详细阐述。在网页开发中,`DIV`元素常被用作容器,通过CSS来控制其...
总结起来,掌握DIV+CSS网页制作技术意味着要理解xHTML的语义化标签,熟悉CSS的选择器机制,掌握盒模型、浮动、定位等布局技巧,并了解如何应对不同浏览器之间的兼容性问题。通过系统的课程学习和实践,初学者可以在...
特别是在使用div+css布局时,由于IE6、IE7和Firefox等浏览器对CSS的支持程度不同,兼容性问题尤为突出。本文将详细介绍如何处理这些兼容性问题。 首先,我们来看CSS中的`!important`规则。`!important`可以强制应用...
### 知识点四:div+CSS布局的优势 - **结构与样式的分离**:通过使用div元素结合CSS,可以实现内容与样式的彻底分离,这不仅提高了网站的可维护性,还有助于搜索引擎优化。 - **灵活性与可重用性**:利用CSS定义的...
3. **流体布局与响应式设计**:在`div+css`布局中,可以利用百分比单位实现流体布局,使页面适应不同尺寸的屏幕。随着移动设备的普及,响应式设计变得至关重要,通过媒体查询(`media queries`),我们可以针对不同...
CSS中的`position`属性有四个主要值:`static`(默认值)、`relative`、`absolute`和`fixed`。在这个场景中,我们将使用`fixed`,因为它会将元素相对于浏览器窗口进行定位,使其在滚动时保持在屏幕的特定位置。 ...