jQuery1.4在IE8下的奇怪表现

generalxu 2011-08-05 12:00:43

先上代码



<head>

<script type="text/javascript" src="jquery1.4.js"></script>

<script type="text/javascript">

$(document).ready(function(){

				$('#navul li').mouseover(function(){

							$(this).stop().animate({marginTop:"-25px"},200);

						})

				$('#navul li').mouseout(function(){

							$(this).stop().animate({marginTop:"0px"},200);				   

						})	

			});

</script>

<style>

.nav{

	width:767px;

	height:25px;

	float:left;

	margin-left:33px;

	_margin-left:16px;

	border-top:#CCC 1px solid;

	background-color:#FFF;

	overflow:hidden;

}



.nav ul, .nav ul li{

	display:block;

	margin:0;

	padding:0;

}



.nav ul li{

	float:left;

	width:150px;

	height:50px;

	text-align:center;

	border-right:#ccc 1px solid;

	cursor:pointer;

}



.nav ul li span{

	display:block;

	width:150px;

	line-height:25px;

	height:25px;

	float:left;

}



.nav_down{

	color:#F00;

}

</style>

</head>



<body>

	<div class="box">

    	<div class="head"></div>

    	<div class="nav">

        	<ul id="navul">

            	<li>

                	<span>sample link1</span>

                    <span class="nav_down">sample link1</span>

                </li>

                <li>

                	<span>sample link2</span>

                    <span class="nav_down">sample link2</span>

                </li>

                <li>

                	<span>sample link3</span>

                    <span class="nav_down">sample link3</span>

                </li>

                <li>

                	<span>sample link4</span>

                    <span class="nav_down">sample link4</span>

                </li>

            </ul>

        </div>

    </div>

    <div id="show"></div>

</body>

每一个li里面放置了两个span，两个span的样式不一样，下面的span开始是溢出隐藏的
本意是想在鼠标放在链接上时，以动画效果将下面的span滑上来
在chrome,firefox,ie6,ie7下测试都可以实现想要的效果
在IE8下有点问题，比如我鼠标放到第三个li上，就会出现前两个li下面的span跟第三个一起滑动上来
不知道为什么，请教各位高手指教

...全文

314 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

last_exile 2011-09-14

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd>

表示用W3C的標準吧

generalxu 2011-08-08

打赏
举报

而且吧，还不能在头部加这个
"http://www.w3.org/TR/html4/loose.dtd"
加了还是出一样的问题，太奇怪了

generalxu 2011-08-08

打赏
举报

还真就是头部的问题哎。
那请教一下前辈这是什么原因呢？
[Quote=引用 8 楼 wishifef 的回复:]

引用 7 楼 generalxu 的回复:
经过一个周末，问题还是没有解决呀，奇怪的现象
IE啊IE！

可能是你的头部的
<!DOCTYPE html ...
<html ...

引起的问题，

我用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T……
[/Quote]

wishifef 2011-08-08

打赏
举报

[Quote=引用 7 楼 generalxu 的回复:]
经过一个周末，问题还是没有解决呀，奇怪的现象
IE啊IE！
[/Quote]

可能是你的头部的
<!DOCTYPE html ...
<html ...

引起的问题，

我用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这个头部的时候会出现你这样的问题，

用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

就没有这个问题，

你查下这方面的问题看看！

generalxu 2011-08-08

打赏
举报

经过一个周末，问题还是没有解决呀，奇怪的现象
IE啊IE！

了無痕 2011-08-05

打赏
举报

IE9/火狐3.6测试均正常

generalxu 2011-08-05

打赏
举报

用过1.5也是同样问题，你的这个1.4.2的链接也是一样的问题，难道是IE8版本的差别？

[Quote=引用 5 楼 wishifef 的回复:]

引用 4 楼 xueling2987 的回复:
为什么不用最新版本的呢说不定是版本问题，建议楼主换个版本试试

应该是jquery的版本问题，

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

IE8测……
[/Quote]

wishifef 2011-08-05

打赏
举报

[Quote=引用 4 楼 xueling2987 的回复:]
为什么不用最新版本的呢说不定是版本问题，建议楼主换个版本试试
[/Quote]

应该是jquery的版本问题，

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

IE8测试正常