div+css总结—FF下div不设置…
在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。
大体结构
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
css文件:(只写出了最主要的部分css代码:定义了最外层div的背景颜色和边框,同时定义了里面的div是浮动的)
.outer{border:#F00 1px solid; background:#FF9 repeat;}
.inner1,.inner2{float:left;}
在IE中显示正常,如图1
(图1)
在FF中显示不正常,边框线和背景色都不能正常显示,如图2
(图2)
从网上查阅了一些资料,才对这个问题有了大体的认识。
原因分析:由于在Firefox和opera中:如果里面的DIV是浮动的(float)而母体不会去计算子体float之后的height。而在 IE中支持这种计算,所以IE下正常。
所以出现这种问题有两个前提:1.外部div没有设置高度;2. 内部div是浮动的(带有float属性)。
解决方法:
给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里面的div来根据内容自动抻开外边的div,除非你确定的知道外部的div的高度的情况下,所以不建议使用这种方法。
方法一:
在内部每个div后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div style="clear:both;"></div>
</div>
方法二:
在.outer中加一句overflow:hidden;(这种方法我不是特别理解,但是经过试验,也是可以解决这个问题的)
overflow 属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。
转载于:https://www.cnblogs.com/nices/p/3397599.html
div+css总结—FF下div不设置…相关推荐
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html><head> <meta charset="utf-8"> ...
- css div 下拉框内容自适应,div+css模拟select下拉框
无标题文档 .mod_select ul{margin:0;padding:0;} .mod_select ul:after{ display: block; clear: both; visibil ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
- 转载div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- 怎么修改网页边框html,DIV+CSS网页布局之边框的设置方法
CSS Borders 边框 边框可以运用到body里的大部分HTML元素. 制作一个元素的边框,你需要border-style边框样式.值可以是: solid, dotted, dashed, do ...
- 去除div css背景,jQuery-拖动div CSS背景
小编典典 好吧,让它起作用.我想我可以解决所有问题了: 最终的jQuery有界限 $(document).ready(function(){ var $bg = $('.bg-img'), elbou ...
- div css 登录页面布局,DIV+CSS页面布局
页面布局设计 一.三行模式或三列模式 特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分 三列模式:将页面分成左.中.右三个部分 在CSS文件里: 1.三行模式代码 ...
- div css背景自动渐变色,div+css背景渐变色代码
CSS使背景颜色渐变--柯乐义 .jb_keleyi_com{ height: 300px; width:100px; margin:0px auto; background-image: -moz- ...
- div css经典布局实例,div+css布局实例:常用图文混排(一)--腾讯图文 - 蜗爱CSS
Example Source Code body{ /*公共样式*/ margin:0; padding:0 0 12px 0; font-size:12px; ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...
最新文章
- angularjs-ngModel 控制页面的宽度
- 《精通ArcGIS Server 应用与开发》——第 1 章 ArcGIS 10简介1.1 ArcGIS 10体系结构1...
- matlab一句一句调试,matlab程序怎样调试和运行
- 树莓派应用实例2:环境温湿度测量
- 【图像分割模型】从FCN说起
- VMware-viewagent-direct-connection安装
- mybatis generator 中文注释_mybatis代码生成器,提高开发效率
- 迁移学习 迁移参数_迁移学习简介
- 探索式测试的思维模型
- python期末知识点_史上最全的Python知识点整理之基本语法
- C语言 ---文件读取
- 【操作系统】核心知识归纳总结
- Arrays.toList工具类
- 记坑 ----- Arrays.sort()
- C 语言漏洞最严重,PHP 最易受攻击,程序员该怎么写代码?
- centos 安装mysql-proxy_详解在Centos 5.2下安装最新Mysql Proxy LUA教程
- Facebook股价周四大涨15.5% 市值超亚马逊
- typescript-react-webpack4 起手与踩坑
- 从0开始,设计研发一个全功能通用大数据系统
- Springboot bean作用域
热门文章
- 流水线效率计算公式_线束加工的生产效率、爬坡计划与产能提升浅读
- 【Python】如何在Python项目中使用相对路径正确的导入模块/包
- 百度搜索(URL)中汉字转为什么编码问题
- 跨语言词嵌入无监督词典推断论文笔记Bilingual Lexicon Induction with Semi-supervision in Non-Isometric Embedding Spaces
- 江西财经大学计算机类含物联网专业,江西财经大学计算机类(02含物联网工程)专业2016年在湖北理科高考录取最低分数线...
- GCN图卷积网络简单实现
- [PAT B1020] 月饼
- Ubunu16.04安装CPU版本Tensorflow
- apt-get install的默认安装路径是什么
- 【生信进阶练习1000days】day6-OrganismDb packages