码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-11-05 16:36:20      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   os   for   sp   on   

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

bubuko.com,布布扣

bubuko.com,布布扣

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

bubuko.com,布布扣

ie7中显示效果如下:

bubuko.com,布布扣

解决方法:

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 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题

标签:style   blog   http   io   ar   os   for   sp   on   

原文地址:http://www.cnblogs.com/lmy-ms/p/4076301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!