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,实现原理相同。

posted @ 2014-11-05 14:29  lmy_moonsky  阅读(374)  评论(0编辑  收藏  举报