ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题

好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度。

正常其他浏览器显示如下:

ie7中显示效果如下:

解决方法:

1、给父元素添加固定的宽度;

如果方法一违背了想要的效果,那么只能采用js来处理,即获取h4的同级节点ul的宽度,然后将其赋给h4.

如下:

<script>
window.onload = function(){
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0"){
for(var i = 0;i < 3;i++){
document.getElementById(‘h_‘+i).style.width = document.getElementById(‘u_‘+i).offsetWidth + ‘px‘;
}
}
}
</script>

先判断ie7,然后针对ie7下运行此代码。还可以用jq,实现原理相同。

时间: 2024-10-13 00:55:09

ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题的相关文章

浮动之后子元素在父元素哪个位置

浮动定为是CSS中重要的排版手段, 比如首字的放大和图文混排,float浮动可以设置left right 和none,当设置左或右浮动时元素会向父元素的左侧或右侧靠近,这个距离是怎么回事呢? 我们来看下 没浮动之前float1的宽度充满整个父块,空隙是仅仅就是父块的内边距 加上它自己的外边距 浮动之后float1的宽度是它自己的内容本身加上自己的内边距 ,看准了是float1的宽度 然后float浮动到最左端的位置是父块的内边距-左,加上自己的外边距-左 的距离,不是父块的边界, 红色代表父内边

父元素如何围住浮动子元素

当元素使用float属性,将脱离文档流,因此父元素便不会包围它. <section> <div class="左栏"> 我是左栏 我是左栏 我是左栏 我是左栏 </div> <div class="右栏"> 我是右栏 </div> </section> <footer>我是页脚</footer> CSS样式如下: section{ border: 1px solid #3

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下 设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子 <!--html代码--> <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

子元素浮动,父级元素为0怎么解决

当子元素浮动时无法撑开父元素,父元素高度为0.这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度. 1.  额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签. 2. 使用after伪类 这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容.经常的做法就是添加一个"点",因为它比较小不太引人注意.然后我们再利用它来清

子元素浮动时无法撑开父元素,父元素高度为0的解决方法

当子元素浮动时无法撑开父元素,父元素高度为0.这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度. <div> <div style="float:left;height:200px;">child</div> <div style="clear:both;"></div> </div>

抛砖引玉之宽度自适应布局

抛砖引玉之宽度自适应布局 什么是宽度自适应布局呢? 就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局. 常见的宽度自适应布局有: 1.  两列:左边宽度不变,右边宽度自适应 2.  三列:左右两边宽度不变,中间部分自适应 3.  三列:左右两边宽度自适应,中间部分不变 一.利用div+css实现以上“自适应布局” (1)两列:左边宽度固定,右边宽度自适应 利用div+float+margin,已在随笔‘float剖析’中讲解,具体代码和效果图见下: <!DOCTYPE

子元素margin-top属性传递给父元素的问题 转!

问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class="box1"><div class="box1_1"></div></div>css样式:.box1{height:400px;background:#fad;}.box1_1{height:100px;margin-top:50p

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8&q

子元素margin-top属性传递给父元素的问题

问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class="box1"><div class="box1_1"></div></div>css样式:.box1{height:400px;background:#fad;}.box1_1{height:100px;margin-top:50p