总结了5个关于css布局的常见问题,并附有解决方法,供参考。
1.float的3像素问题及解决办法
当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,可以在float浮动容器样式里加针对IE6的属性”_margin-right”和”*html”,如:
#sidebar{
float:left; width:200px; _margin-right:-3px;}
或者
#sidebar{
float:left; width:200px;}
*html #sidebar{ margin-right:-3px;}
2.上边容器浮动后,下边的容器跟着浮动,造成页面错乱
如图中布局所示:footer必须要单独占一行,但当sidebar浮动后,content的高度小于sidebar的高度时,footer也跟着浮动到sidebar右侧了,造成页面错乱。解决办法是在maincontent和footer之间插入一个容器,设置样式
clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除,即可使页面正常
3.IE6下float浮动导致双倍边距的bug
当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px,而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug
4.当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?
这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS
HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!–[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!–[if IE]>中,这样应该可以通过验证了
5.css布局的相对定位与绝对定位
规划页面时,许多时候需要用到相对定位或绝对定位,这里边有个css技巧,掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后,此时子元素再使用绝对定位,位置是相对于父元素。如果父元素没有定位,那么子元素的绝对定位是相对于浏览器
分享到:
相关推荐
自己遇见的一些常见的css兼容性问题。和css hack 自己总结出来后生产pdf文档带书签的。 CSS兼容性笔记 1 一 css hack 1 1.直接案例 1 2. hack写法列表 1 3.在IE7+浏览器中按照IE7文档模式 1 4. 注意 Html头部的声明...
纯 CSS 打造多列等高并不像想象中那么...本文着重讲述多列布局出现的问题,之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack,无图片,无 javascript,甚至可以用在最严格编码的网站上。
css、html最全知识点总结及常见问题的解决方法 1、文本溢出属性 2、元素的三种分类及其特点 3、图片3px的所有解决方法 4、定位属性及其特点 5、清除浮动的一些方法 6、隐藏元素的三种方法及其特点(敲黑板:overflow...
本书由浅入深地对基于Web标准的大规模专业级CSS Web站点进行了研究,对一些常见问题提供了易于理解的解决方法,对如何高效开发以CSS驱动的专业级Web设计给出了实用的方案。 本书主要内容 使用含CSS的XHTML的...
浮动元素的特性五、清除浮动解决方法六、定位1. 边偏移2. 定位模式2.1、静态定位 static2.2、相对定位 relative2.3、绝对定位 absolute2.4、绝对定位垂直水平居中2.5、固定定位 fixed2.6、重叠七、常见布局1. 版心2....
我这里就以自己的经验给大家介绍一些常用的解决方案。 1、如果是两栏并列,要在中间显示分界线或图片,可以使用repeat-y的背景图片来实现,此样式写在这两栏的父级元素中,可以保证分界线与最高的栏等高。 示例: ...
block在Firefox下显示布局错乱问题,按照常理,对于某一单元行需要显示时,使用CSS display:block属性,在IE浏览器中显示正常,但是当用Firefox浏览时却出现了布局错乱的问题,这里和大家分享一下解决方法。...
在本文中,我们将学习 CSS Viewport units(视口单位)以及如何使用它们,并用列举一些常见问题及其解决方案和用例,让我们开始吧。 简介 根据CSS规范,视口百分比单位相对于初始包含块的大小,它是web页面的根元素。 ...
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决...
三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局:高度已知,其中左栏、右栏宽度各为...
[]仅用于主菜单和带有侧栏的整版布局解决方案[]创建带有部分的可用裸露骨头的网格系统[]仅解决一个css文件的问题[]是否可以有没有任何类的移动菜单? 什么 Cupcake.css是一个无类CSS框架,可以使您的html页面更加...
1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 2、同一个的class选择符可以在一个文档中重复出现,... 临时解决方法:选择符{属性名:B !important;属性名:A} 4、如果一组要嵌套的标签之间需
带来自己的LESS / SaaS / CSS-in-JS解决方案 压缩后只有2kb的空间极小 仅学习一些简单的类名,其余的默认情况下,您可以直接进行调整。 黑暗模式如何运作 FeatherCSS附带了带有CSS变量的深色模式支持。 为了提供...
2、if造成失败 有的CSS制作时候可能用了使用if判断语句对什么浏览器调用什么CSS文件或CSS代码,而疏忽造成if调用的混乱,造成在某些浏览器上显示正常,有的浏览器不能显示CSS控制布局,解决方法好好检查自己造成CSS...
此外,在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的,很少是可行的。实际上实现这个效果过于复杂,而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制,但使用现代CSS,我们...
在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。 1. 自动匹配高度 自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战。 ...
1.2.4 Android移动Web项目开发的三种解决方案:Native, Web和Hybrid优缺陷分析 4 1.2.5国内外应用现状 6 1.2.6 研究现状总结 7 1.3研究目标与内容 7 1.3.1多窗口浏览器模式的实现机制 7 1.3.2跨域交互即缓存处理方法...