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,实现原理相同。
ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题的更多相关文章
- text-align:center;在ie7下,父级加上会让block状态的子元素居中。
text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- 使用min-content实现容器宽度自适应于内部元素
前言 设计师可以分为如下两类: 先做好设计,然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文,并创建适合于内容的设计 HTML原生就是响应式的(HTML内容在视口内流式的分布). ...
- 使用flex防止fit-content子元素冲出父元素宽度的方法
父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...
- ElementUI el-table 在flex下的宽度自适应问题
BUG:在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据,在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小. Debug:通过控制台发现组件生成的tabl ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 子元素margin-top属性传递给父元素的问题 转!
问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...
- 改变父元素的透明度,不影响子元素的透明度—css
1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
随机推荐
- 使用Visual Studio下自带的SQL Server Express
软件环境:Windows7(x64) + Visual Studio 2010 + SQL Server Express 2008 1.配置数据库 装VS2010不小心把自带的SQL Server 2 ...
- lr并发量和迭代的区别
1.并发量 并发量也就是同时运行的量.比如100个用户同时登录,那么并发量就是100.当然这100个用户可以进行参数化,也可以采用设置虚拟用户数(vuser). 2.迭代 迭代就是单个用户运行的次数. ...
- Git: untrack a file in local repo only and keep it in the remote repo
You could update your index: git update-index --assume-unchanged nbproject/project.properties and ma ...
- LeetCode Palindrome Permutation II
原题链接在这里:https://leetcode.com/problems/palindrome-permutation-ii/ 题目: Given a string s, return all th ...
- Java基础之扩展GUI——高亮元素、上下文菜单、移动旋转元素、自定义颜色(Sketcher 10)
窗口应用程序. 本例在上一版的基础上实现了高亮元素.移动元素.上下文菜单.旋转元素.设置自定义颜色. 1.自定义常量包: // Defines application wide constants p ...
- Java:并行编程及同步使用方法
知道java可以使用java.util.concurrent包下的 CountDownLatch ExecutorService Future Callable 实现并行编程,并在并行线程同步时,用起 ...
- Js拼Json对象
我们通常会拼字符串,但是拼字符串的话,遇见占位符会出错. 下面分享一个拼js拼json对象的方法: var jsonArr = []; $ ...
- 微信中修改title
//需要jQuery.zepto版 function weixinTitle(){ var $body = $('body'); document.title = 'title'; // hack在微 ...
- Qt之自定义信号和槽函数
自定义信号和槽函数: 1.类的声明和实现分别放在.h和.cpp文件中: 2.类声明包含Q_OBJECT宏: 3.信号只要声明不要设计其的实现函数 4.发射信号用emit关键字 5.自定义槽的实现与普通 ...
- The method setCharacterEncoding(String) is undefined for the type HttpServletResponse 是什么原因?
response.setCharacterEncoding("gb2312"); 在Servlet2.3中是不行的,至少要2.4版本才可以,如果低于2.4版本,可以用如下办法: r ...