- 1、本文档共8页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
div随内容自由延
在Div镶套布局中,父标签DIV的高度不变。在IE下没有问题,但是在FIREFOX下就有问题了。如图:发了两张同样的怕百度盗链,另一张放在我网站上,在教育网内/one2two/pic/item/a7c3653de3c3f1de9f3d6295.jpg/question.gif代码:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/title/headbodydiv style=width:300px;border:#FF0000 solid 1px;div style=width:200px; float:left; position:relative;border:#000000 solid 1px; clear:left??? p此处显示/p??? p新 Div 标签的/p??? p内容/p/divdiv style=width:80px; float:left; position:relative;border:#0000CC solid 1px; clear:right此处显示新 Div 标签的内容/div/div/body/html在网上搜索一下发现有同样问题的人还挺多,给的方法也很多,有用JS的,有用HEIGHT=100%的,我感觉都没有作用。
我在下面加了一个div style=clear:both/div加完后代码是:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/title/headbodydiv style=width:300px;border:#FF0000 solid 1px;div style=width:200px; float:left; position:relative;border:#000000 solid 1px; clear:left??? p此处显示/p??? p新 Div 标签的/p??? p内容/p/divdiv style=width:80px; float:left; position:relative;border:#0000CC solid 1px; clear:right此处显示新 Div 标签的内容/divdiv style=clear:both/div/div/body/html这样就可以解决问题了兼容FIREFOX下背景层的自适应高度-浏览器兼容教程
来源:艺酷建站 作者:艺酷原创 更新时间:2009-01-20 点击: 19
在FF下DIV层里包含的是DIV层,而不是内容文字的话,背景图是不会自动适应高度的,无忧布局的时候用到了背景自适应高度,就顺手发来,与大家一起分享.
收集整理了三种解决方法.
首先我们定义三个层.
div id=container div id=main //div div id=sidebar //div /div
第一种:
设定CSS
#container { display:table}
container作为最外层,在IE下背景图可以自适应,但在FF下只有main层与sidebar层可以.只需定义#container { display:table}就可以了,原理是和以前的表格布局是一样的.只是这样的话会出现float层出错,不推荐使用.
第二种:
设定CSS
#container{height:100% }#main{height:100% }#sidebar{height:100% }
这样就兼容了IE ,FF,比起display:table;的方法好些。display:table;会导致一些布局出错。
第三种:
设定CSS
#container:after {?content: .;?display: block;?height: 0;?clear: both;?visibility: hidden;}
:after(伪对
您可能关注的文档
- BCD1.5使用.doc
- BCDⅢ型使用.doc
- Biolog微生物鉴.doc
- BTV-科技频道《养生堂.doc
- Byfipba历年诺贝尔生理学医学奖获.doc
- B超数据如.doc
- CAD高级认证考.doc
- ck-ngtlu历年诺贝尔生理学医学奖获.doc
- CT、核磁、X光、B超有什.doc
- daxuewulidi.doc
- 分析let s单元56ago2卷纸zheng unit56.pdf
- 塑胶材料其它分类原料pa9t 12.pdf
- md16x16数字媒体切换器设备.pdf
- 者参考项目发起人学科类型单位序列承包商修订页代码顺序典型.pdf
- 届世界天然气大会阿姆斯特丹2006add10288.pdf
- 期测试记录表每周weekly g1g6 journeys tests level 6 lesson26.pdf
- modernize-whitepaper现代化您应用程序白皮书.pdf
- anybackup产品典型案例分析.pdf
- 约克金融工程课程tfeslide32.pdf
- 广州市妇女儿童医疗中心历份教学药历01tjy.pdf
最近下载
- 桥梁桩基钢筋加工与安装首件施工方案标准版.pdf
- GB55007-2021砌体结构通用规范.docx VIP
- 初中数学苏科版八年级下册期末复习——第10章《分式》尖子生提优训练(二).docx
- COMPETENCE AND PERFORMANCE INLANGUAGE TEACHINGJack C Richards 能力与绩效 语言教学杰克C理查兹.pdf
- 大学四级英语模拟试题(含解析).pdf VIP
- 京东自营厂直培训考试(含答案).pdf VIP
- 2022-2023学年广东省深圳市罗湖区七年级(下)期末地理试卷.doc
- 2023年重庆医科大学公共课《中国近代史纲要》期末试卷A(有答案).docx VIP
- 四轴飞行器说明书.pdf
- 桥梁桩基钢筋加工和安装首件施工方案.doc
文档评论(0)