好久没切图,昨天遇到个浏览器兼容的老问题,在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,实现原理相同。

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

  1. text-align:center;在ie7下,父级加上会让block状态的子元素居中。

    text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.

  2. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  3. 使用min-content实现容器宽度自适应于内部元素

    前言 设计师可以分为如下两类: 先做好设计,然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文,并创建适合于内容的设计 HTML原生就是响应式的(HTML内容在视口内流式的分布). ...

  4. 使用flex防止fit-content子元素冲出父元素宽度的方法

    父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...

  5. ElementUI el-table 在flex下的宽度自适应问题

    BUG:在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据,在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小. Debug:通过控制台发现组件生成的tabl ...

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

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

    问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...

  8. 改变父元素的透明度,不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  9. 解决子元素设置margin-top,效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

随机推荐

  1. Windows2003中IIS的安全设置技巧

    在Windows Server 2003中对于IIS的安全设置具有十分重要的意义,所以掌握IIS安全设置的六大技巧是一个网管员必备的基本技能.下面就是对IIS的安全设置的六大技巧. 技巧1.安装系统补 ...

  2. shutter截图工具

    安装: 1.打开ubuntu software center,搜索shutter,安装. 使用:

  3. Codeforces Round #350 (Div. 2) E 思维模拟

    给出一个合法的括号串 有LRD三种操作 LR分别是左右移动当前位置 且合法 D为删除这个括号和里面的所有 当删除完成后 位置向右移动 如果不能移动 就向左 比赛都是很久远的事情了 写这道题也是一时兴起 ...

  4. P1514 引水入城

    概述 首先,这是一道好题,这道题既考查了图论的dfs知识,又考察了区间贪心问题中很典型的区间覆盖问题,着实是一道好题. 大概思路说明 我们观察到,只有第一行可以放水库,而第一行在哪里放水库的结果就是直 ...

  5. jfinal路由简单解析

    在jfinal中,通过JFinalFilter对所有的类进行过滤. 以下是路由的调用关系(我在调用关系旁边做了标记,会贴出具体的代码和解释): -1- Config: Routes -2- Inter ...

  6. 制作U盘启动盘及安装操作系统的方法

    U盘启动盘制作方法: 1.从网上下载最新的老毛桃U盘启动制作工具主程序并安装 2.插入U盘(制作启动盘前先保存好你的资料到其它地方,以防丢失不可找回) 3.插入正确的U盘后程序会自动检测到U盘,启动模 ...

  7. mysqldump database table

    一)在同一个数据库服务器上面进行数据表间的数据导入导出: 1. 如果表tb1和tb2的结构是完全一样的,则使用以下的命令就可以将表tb1中的数据导入到表tb2中: insert into db2.tb ...

  8. 20145320 《Java程序设计》第2周学习总结

    20145320 <Java程序设计>第2周学习总结 教材学习内容总结 3.1 类型.变量与运算符 基本类型 整数(short.int.long) .字节(byte) .浮点数(float ...

  9. svg学习(七)polygon

    <polygon> 标签用来创建含有不少于三个边的图形. <?xml version="1.0" standalone="no"?> & ...

  10. javascript对json对象的序列化与反序列化

    首先引入一个json2.js.官方的地址为:https://github.com/douglascrockford/JSON-js 这里为了方便我直接贴上源代码 /* json2.js 2013-05 ...