问题:FF中把UL下的LI设为左浮动UL的背景色就没有了?
因为容器的子元素设置浮动后, 内容移出了文档流! 解决办法:
1.给个overflow:hidden;作为闭合浮动元素
2.设定UL 一个固定的高度 下面是一些与之相关的解决办法,参考文章《那些年一起清除过的浮动》
<style type="text/css">
.warp{
width:80%;
border:1px solid #000000;
}
.main{
width:70%;
height:300px;
background-color:#999933;
float:left;
}
.side{
width:22%;
height:300px;
background-color:#66CC33;
float:right;
}
#footer{
width:80%;
height:80px;
background-color:#0000FF;
}
</style>
</head> <body>
<div class="warp">
<h2>1)添加额外标签</h2>
<div class="main">main</div>
<div class="side">side</div>
<div style="clear:both;"></div>
</div>
<div id="footer"></div>
</body>
没有添加红色代码前:
添加红色代码后:
2:<br clear="all"/>
在红色代码处放上如上代码,效果一样
br 有 clear=“all | left | right | none” 属性
3:父元素设置overflow:hidden;(在IE6中还需要触发 hasLayout ,例如 zoom:1)
<body>
<div class="warp" style="overflow:hidden;*zoom:1;">
<h2>3)父元素设置overflow</h2>
<div class="main">main</div>
<div class="side">side</div>
</div>
<div id="footer"></div>
</body>
其余代码如第一个例子,效果都一样
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;04年POPO就发现overflow:hidden会导致中键失效
4)父元素设置 overflow:auto 属性
同样IE6需要触发hasLayout
缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等
5)父元素也设置浮动
针对上例,让footer清除浮动clear:both;否则
缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用
6)父元素设置display:table
缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用
7)使用:after 伪元素
由于IE6-7不支持:after,使用 zoom:1触发 hasLayout
原文全部代码如下:
<style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* for IE/Mac */ </style> <!--[if IE]> <style type="text/css"> .clearfix {zoom: 1;/* triggers hasLayout */ display: block;/* resets display for IE/Win */} </style> <![endif]--> 鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
优点:结构和语义化完全正确,代码量居中
缺点:复用方式不当会造成代码量增加
问题:FF中把UL下的LI设为左浮动UL的背景色就没有了?的更多相关文章
- jquery选择div下的ul下的li下的a
使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").ch ...
- 对Ul下的li标签执行点击事件——如何获取你所点击的标签
问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...
- 遍历ul下的li,点击弹出li的索引
首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...
- ul下的li浮动,如何是ul有li的高度
此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title& ...
- 关于<ul> 下的 <li> 里面的<a> 标签字体颜色不能控制
1.元展示 <ul class="ul"> <li><a href="#">菜单一</a></li> ...
- jquery,javascript -设置某一ul下的li下的 a的属性
//javascriptvar ul = document.getElementById('ul); var as = ul.getElementsByTagName('a'); for(var i ...
- 给ul下的li加click时间
$('.province ul li').click(function() {//方法 });
- (1)若当前字符不是大于0的数字字符,则复制该字符于新字符串中; (2)若当前字符是一个数字字符,且它之后没有后继字符,则简单地将它复制到新字符串中; (3)若当前字符是一个大于0的数字字符,并且还有后继字符,设该数字字符的面值为n,将它的后继字符重复复制n+1次到新字符串中; (4)以上述一次变换为一组,在不同组之间另插入一个"_"用于分割(5))若字符串中包含有下划线'_',则变换为 \UL
package b; import java.util.Scanner; public class Zifuchuan { public static void main(String[] args) ...
- 为所有的Ul下的li标签添加点击事件
随机推荐
- Gentoo解决Udev升级的网卡重命名问题
问题描述: 配置网络时,很多新手运行ifconfig命令查看网卡时,会发现我们熟悉的eth0网卡没有了,或是发现一些不规则命名的东东,不错,那就是你的网卡. 因为内核升级(忘记具体哪个版本了)从ude ...
- java的克隆
java有深拷贝和浅拷贝的区别. 浅拷贝:他是指拷贝该对象时,仅仅是拷贝了对象的本身(包括对象的基本数据类变量),不会拷贝引用数据类型的变量,也就是拷贝出来的新对象基本数据类型的值不变,引用数据类型的 ...
- iOS 通过颜色来生成一个纯色图片
//通过颜色来生成一个纯色图片- (UIImage *)buttonImageFromColor:(UIColor *)color{ CGRect rect = CGRectMake(0 ...
- 文字编码转换器 V1.0 免费绿色版
软件名称: 文字编码转换器 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / WinXP 软件大小: 920KB 图片预览: 软件简介: 文字编码转换器,能把普通文 ...
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- ural 1073.Square Country(动态规划)
1073. Square Country Time limit: 1.0 secondMemory limit: 64 MB There live square people in a square ...
- iOS不可变字符串的所有操作
可以直接复制代码即可运行看看结果,方便理解 //NSString //OC字符串不能用printf输出 //但是遗憾的是OC没有一个从终端读取数据的方式,需要使用scanf读取C字符串然后转换成OC的 ...
- QTP如何连接/查询数据库
在日常测试工作中经常会遇到有关于数据的测试,比如数据的正确性,完整性,测试人员造的测试数据预期与实际程序运行结果是否一致,如果这个时候数据量比较多的情况下,通过人工比对无疑是一项非常耗时,而且安全系数 ...
- 在Dll中创建对话框并调用
1.第一步创建一“MFC AppWizard (dll)”工程,接下来选择“Regular Dll using shared MFC DLL”,点击“Finish”. 2.添加一对话框资源到工程中,从 ...
- nefu 1116 字符串加密
字符串加密 Problem : 1116 Time Limit : 1000ms Memory Limit : 65536K description 给你一段经过加密的字符串,我们称之为密文,现在请你 ...