父元素不设定宽高时绝对定位，IE6/IE7下块级子元素宽度无法自适应铺满父级元素的bug
前两天写页面时，想实现这样的效果，包裹二级导航的Div宽高均不能设定一个绝对的数值，并绝对定位，当鼠标经过主导航“关于我们”时显示二级导航，鼠标经过二级导航上的链接时，对应的链接背景颜色变成红色。代码结构是这样的：& & &div class=&nav&&& && && &&a class=&nav-a& href=&&&关于我们&/a&& && && &&div class=&subnav&&& && && && &&ul&& && && && && & &li&&a href=&#&&公司简介公司简介公司简介&/a&&/li&& && && && && & &li&&a href=&#&&管理&/a&&/li&& && && && && & &li&&a href=&#&&新闻&/a&&/li&& && && && && & &li&&a href=&#&&资质认证&/a&&/li&& && && && && & &li&&a href=&#&&官方旗舰店&/a&&/li&& && && && &&/ul&& && && &&/div&& &&&&/div&本来如果包裹二级导航的subnav的宽度设置了个死的数值的话，实现起来就方便了，直接将二级导航的&a&标签display:block然后设置hover状态的背景颜色就好了，但是因为subnav设置了绝对定位，在ie6/7下无论&a&设置了display:block再设置width:100%，背景宽度均不能占满外围百分之百，背景宽度的值等于文字加上文字左右的padding的数值，如下图ie6/ie7的效果：后来想既然利用&a&的伪类无法实现这样的效果那用js动态的改变&a&所在的块级元素&li&背景好了，经过试验ie6/ie7上&li&的背景颜色的宽度始终不能铺满外围的&ul&，长短不一。鼓捣试验了半天自己真的没法子了（水平不够！），后来别人发来一个有类似效果的一个网址给我，用ie7打开发现同样的效果别人实现得好好的（ie6下不正常显示，因为外国网站多数不考虑兼容至ie6了），于是用谷歌浏览器审查元素发现该网站也是通过改变&a&标签所在的&li&的背景颜色来达到效果。于是我通不过地拷贝，增减，调试样式，终于找到了坑爹的解决方法，在我写二级导航的样式时我习惯设置&li&的高度然后再设置行高让文字居中，问题就出在这里，我把高度属性height去掉只写line-height就正常了,不过经我试验利用&a&的伪类状态在ie6/ie7无法实现这样的效果，所以我是通过控制&li&来达到效果。附上代码：1.当写了高度属性 .subnav ul li{height:28｝时ie6/ie7背景无法铺满，长短不一代码片段 1效果预览&!doctype html&
&meta charset=&utf-8&&
&title&解决父级元素绝对定位时li的宽度问题&/title&
&style type=&text/css&&
html,body,div,ul,li{margin:0;padding:0;}
ul,li{list-style:none}
a{text-decoration:color:#222}
.nav {position:width:100height:40margin:20px auto 0;}
.nav .nav-a{display:line-height:40text-align:background:#000;color:#font-weight:}
.subnav{position:left:0;top:40display:}
.subnav ul{list-style:none}
.subnav ul li{height:28line-height:28font-size:14white-space:padding:0 20background:#424040; vertical-align:top}
.subnav ul li.cur{background:color:#}
.subnav ul li a{display:color:#white-space:nowrap}
.subnav ul li a:hover{color:#}
&script src=&/ajax/jQuery/jquery-1.7.2.min.js&&&/script&
&div class=&nav&&
&a class=&nav-a& href=&&&关于我们&/a&
&div class=&subnav&&
&li&&a href=&#&&公司简介公司简介公司简介&/a&&/li&
&li&&a href=&#&&管理&/a&&/li&
&li&&a href=&#&&新闻&/a&&/li&
&li&&a href=&#&&资质认证&/a&&/li&
&li&&a href=&#&&官方旗舰店&/a&&/li&
$(function()
{$('.nav').hover(
function(){$(this).find('.subnav').show();},
function(){$(this).find('.subnav').hide();})
$(function()
{$('.subnav li').hover(
function(){$(this).addClass('cur');},
function(){$(this).removeClass('cur');}
2.当删掉高度属性.subnav ul li{height:28｝时，ie6/ie7显示效果就正常了。代码片段 2效果预览&!doctype html&
&meta charset=&utf-8&&
&title&解决父级元素绝对定位时li的宽度问题&/title&
&style type=&text/css&&
html,body,div,ul,li{margin:0;padding:0;}
ul,li{list-style:none}
a{text-decoration:color:#222}
.nav {position:width:100height:40margin:20px auto 0;}
.nav .nav-a{display:line-height:40text-align:background:#000;color:#font-weight:}
.subnav{position:left:0;top:40display:}
.subnav ul{list-style:none}
.subnav ul li{line-height:28font-size:14white-space:padding:0 20background:#424040; vertical-align:top}
.subnav ul li.cur{background:color:#}
.subnav ul li a{display:color:#white-space:nowrap}
.subnav ul li a:hover{color:#}
&script src=&/ajax/jQuery/jquery-1.7.2.min.js&&&/script&
&div class=&nav&&
&a class=&nav-a& href=&&&关于我们&/a&
&div class=&subnav&&
&li&&a href=&#&&公司简介公司简介公司简介&/a&&/li&
&li&&a href=&#&&管理&/a&&/li&
&li&&a href=&#&&新闻&/a&&/li&
&li&&a href=&#&&资质认证&/a&&/li&
&li&&a href=&#&&官方旗舰店&/a&&/li&
$(function()
{$('.nav').hover(
function(){$(this).find('.subnav').show();},
function(){$(this).find('.subnav').hide();})
$(function()
{$('.subnav li').hover(
function(){$(this).addClass('cur');},
function(){$(this).removeClass('cur');}
&& 其实ie浏览器的f12可以选择用ie7的模式来解析的 ps:为什么我的代码没有放在可运行的框框里 而是直接贴出来了 //：电脑里没有了IE6、7，就看看，不发表了。。。
电脑里没有了IE6、7，就看看，不发表了。。。
7 总笔记数
1.8万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：在设计中宽度我们通常可以进行控制，但高度却没有明确的控制，一般元素的高度都是由子元素来控制的。即子元素的高度和决定了父元素的高度。当然手动设置父元素的指定高度也是可以的。
问题：百分比控制的父元素有时不能够被撑开，子元素都几百px了，但父元素高度仍然为0。
原因：浮动造成了容器不能正常计算元素高度。
解决方案：
& & 方案一：为父元素添加样式：overflow：hidden；该样式相当于为父容器清除了浮动。其实际效果是隐藏超出边界的内容。
& & 方案二：在父元素中最后一个子元素后添加&div style=&clear:both&&&/div&，这样就可以清楚父元素的浮动效果，元素的高度也就能够计算了。（若无效，请为每一个浮动的子元素清除浮动）
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：76942次
积分：3037
积分：3037
排名：第8137名
原创：228篇
转载：14篇
评论：24条
(4)(7)(7)(4)(4)(6)(4)(6)(10)(11)(7)(19)(10)(21)(13)(11)(17)(14)(6)(11)(1)(7)(18)(28)jquery iframe取得元素与自适应高度
jquery iframe取得元素与自适应高度
| 时间： 20:25:18 | 阅读数：
[导读] 今天没事来总结一下iframe在jquery中怎么操作的，下面我来给各位介绍jquery
获取iframe子 父页面的元素及iframe在jquery高度自适应实现方法，各位朋友可参考。jquery方法:在iframe子页面获取父页面元素代码如
今天没事来总结一下iframe在jquery中怎么操作的，下面我来给各位介绍jquery
获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法，各位朋友可参考。
方法:在子页面获取父页面元素代码如下:
$('#objId', parent.document);
// 搞定...在父页面 获取iframe子页面的元素代码如下:
$(&#objid&,document.frames('iframename').document)$(document.getElementById('iframeId').contentWindow.document.body).html()
&&显示iframe中body元素的内容。
&$(&#testId&, document.frames(&iframename&).document).html();
&根据iframename取得其中ID为&testId&元素&
$(window.frames[&iframeName&].document).find(&#testId&).html()
&在父窗口中操作 选中IFRAME中的所有输入框：
&$(window.frames[&iframeSon&].document).find(&:text&);
在IFRAME中操作 选中父窗口中的所有输入框：
$(window.parent.document).find(&:text&);
iframe框架的HTML：
&iframe src=&test.html& id=&iframeSon& width=&700&P height=&300&P frameborder=&0&P scrol=&auto&&&/iframe&
1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames[&iframe1&].document).find(&input[@type='radio']&).attr(&checked&,&true&);
2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find(&input[@type='radio']&).attr(&checked&,&true&);
iframe框架的：
&iframe src=&test.html& id=&iframe1&P width=&700&P height=&300&P frameborder=&0&P scrolling=&auto&&&/iframe&
假设有两个页面,在相同域下.index.html 文件内含有一个iframe:XML/HTML代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&& &html xmlns=&http://www.w3.org/1999/xhtml&&& &head&& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&& &title&页面首页&/title&& &/head&& & &body&& &iframe src=&iframe.html& id=&koyoz& height=&0& width=&0&&&/iframe&& &/body&& &/html&&&
iframe.html 内容:XML/HTML代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&& &html xmlns=&http://www.w3.org/1999/xhtml&&& &head&& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&& &title&iframe.html&/title&& &/head&& & &body&& &div id=&test&&www.&/div&& &/body&& &/html&&iframe自适
应高度代码很简单：
$(&#iPersonalInfo&).load(function() {$(this).height($(this).contents().height());})
有一点需要注意的，我也在调试的时候才发现的，耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定，否则不会执行。 以下是jQuery,load事件的概述 在每一个匹配元素的load事件中绑定一个处理函数。 如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。 注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。iframe代码，注意要写ID
&iframe src=&test.html& id=&main& width=&700& height=&300& frameborder=&0& scrolling=&auto&&&/iframe&
jquery代码１：
//注意：下面的代码是放在test.html调用$(window.parent.document).find(&#main&).load(function(){var main = $(window.parent.document).find(&#main&);var thisheight = $(document).height()+30;main.height(thisheight);});
jquery代码２：
//注意：下面的代码是放在和iframe同一个页面调用$(&#main&).load(function(){var mainheight = $(this).contents().find(&body&).height()+30;$(this).height(mainheight);});
手机扫描下方二维码，关注php100官方微信。
同步官网每日更新，为您带来随时随地的资讯与技术信息。更有不定期的互动抽奖活动，赢取实用贴心的小礼物。
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接原文地址：
友情链接与合作伙伴
粤ICP备号-3}