Question

我有一个名为#lightPole的空div，它有一个灯柱的背景图像。我正在运行一个脚本，使灯柱延长容器的长度。除了IE 7之外，大多数浏览器中的一切看起来都不错。出于某种原因，我无法弄清楚灯柱是否正在通过页脚扩展。有什么想法吗？

这是网站 - http://greenlight.mybigcommerce.com/

这是javascript：

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

$（document）.ready（function（）{ var Container_height = $（'＃Container'）。height（）; $（ '＃lightPole'）的高度（Container_height）。 }）;

以下是与div相关的一些css：

#Container {
height:auto;
width: 1100px;
margin: 0 auto;
background-image:url(../images/containerBackground_2.png)!important; /*this is a hack for IE6 to choose between background images*/
background-image:url(../images/containerBackgroundIE6.png);
background-position: center top;
overflow:hidden;
clear:both;
}


#Outer {
clear: both;
height: auto;
margin: 0 0 0 15px;
overflow: hidden;
padding: 0;
width: auto;

}

#Wrapper {    
clear: both;
float: left;
height: auto;
margin:9px 0 0 43px;
min-height: 350px;/***added to keep footer from hitting light on nav light pole**/
padding: 0;
width: 990px;

}


#LayoutColumn1{
 float: left;
height: 100%;
margin-bottom: 0;
margin-right: 0;
margin-top: 0;
position: relative;
z-index: 88;
clear:both;
}

#lightPole {
background:url(../images/lightPole8aSlice.png);
margin: 0 0 0 19.9px;
/*min-height: 320px;*/
overflow: hidden;
padding: 0;
position: absolute;
width: 15px;
z-index: -100;
 display: inline-block;
float: left;
}

更新 - 这可能是由于未正确关闭的div或浮动没有清除造成的吗？

Answer 1

我遇到了类似的先前问题，这是由于$（document）.ready（函数（）在加载所有图像之前触发。尝试使用$（window）.load（function（）{

Answer 2

您似乎同时加载了两个版本的jquery：jquery 1.3.2和1.5.2。虽然我还没有确定你的问题，但最好删除其中一个。

Answer 3

根据我的经验，我的图像对以下代码的反应不同：

$('#myimage').height(200);

VS

$('#myimage').attr('height',200);

第一个，你正在使用的那个，将样式属性的高度添加到你已经发现的MOST浏览器中。

第二个设置height属性本身，并且可以在更多浏览器中使用。我没有IE7实例，但你可以试试这个。

javascript div扩展到IE7中的容器〜帮助！

3 个答案: