IE6中改变img的src属性时发生的灵异事件

owen1759 2008-04-29 09:51:32

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

	<title>这是不是Bug</title>

</head>

<body>

	<div style="position:relative;">

		<img src="1.gif" style="margin:200px 400px;padding:0;" onmouseover="this.src='2.gif';" onmouseout="this.src='1.gif';"/>

	</div>

</body>

</html>

看看这段代码,只要你把鼠标放在图片上,图片却自己“跑”了很远！可是我除了改变它的src以外就根本没有改变其他任何样式啊？？？
经过反复对比发现这个Bug(不知道是不是Bug)重现有这几个要求：
1.父层必须是relative定位
2.图片必须定义了padding属性，哪怕是0，只要设置了，即使padding-top这样也可以
3.图片必须有margin属性，就是它的左右值(准确说是左值)控制“跑动”的距离
而且发现，它虽然水平方向会跑动，但是垂直方向却是不受影响的。
请问这是不是一个Bug，如果是Bug应该怎么解决呢？

...全文

352 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

lawrendc 2008-06-03

打赏
举报

是灵异？？

还是事件？？

王武Wangwu 2008-05-30

打赏
举报

学习css中~

owen1759 2008-05-30

打赏
举报

To 14 楼：
显然你是回帖没看帖的，在前面我说过
[Quote=引用 7 楼 owen1759 的回复:]
To 6 楼:
貌似FireFox不会出现这样现象,所以IE最令人郁闷的地方就在于,它出现了稀奇古怪的现象没有东西能告诉我们是什么原因,而FireFox可以有FireBug来查看它究竟是怎样解析的

:hover能用于img标签么?貌似在我的印象中它只能用于a链接,但是出于代码简洁的目的我不想再在外面套一个 <a> </a>

而且我现在是就事论事讨论这个情况的产生原因而非讨论如何解决,解决它很容易只要使我在主帖中列举的任一条件不成立即可.但是以一种学习的心态我想搞清楚出现这情况的本质原因,假如按照W3C标准不应该这样解析,那就是IE6.0的责任了[/Quote]

浴火_凤凰 2008-05-29

打赏
举报

其实这种效果用:hover来实现比较方便

owen1759 2008-05-26

打赏
举报

当然不可能，要是两个图片大小不一样我还大惊小怪，那岂不是太SB了

jackyBody 2008-05-18

打赏
举报

[Quote=引用 11 楼 owen1759 的回复:]
对啊，我的IE和你的IE版本号从头到尾全部一样
但是貌似我没在别的地方看到这样的Bug啊？
像“双倍边距”“3px空白”等等Bug都有人说
所以我想知道是我对CSS的理解有误还是IE本身的原因
[/Quote]

有些问题在加浮动的时候才出现；

ps：lz 是不是 1.gif 和2.gif 大小不一样呵呵~！~

owen1759 2008-05-18

打赏
举报

对啊，我的IE和你的IE版本号从头到尾全部一样
但是貌似我没在别的地方看到这样的Bug啊？
像“双倍边距”“3px空白”等等Bug都有人说
所以我想知道是我对CSS的理解有误还是IE本身的原因

Navymk 2008-05-18

打赏
举报

有啥想不通的这就是个bug
ie6下margin问题很多,能不用margin就尽量别用
ff下正常
ie版本6.0.2900.2180 注意3/4位,win2003sp2下会不同

owen1759 2008-05-17

打赏
举报

不可能不发生，我刚才又再试了一遍，情况依旧发生
除非你不是IE6.0或者你改了代码

mike123hl 2008-05-16

打赏
举报

拷贝楼主代码，在IE6.0中运行
一切正常

owen1759 2008-05-15

打赏
举报

To 6 楼:
貌似FireFox不会出现这样现象,所以IE最令人郁闷的地方就在于,它出现了稀奇古怪的现象没有东西能告诉我们是什么原因,而FireFox可以有FireBug来查看它究竟是怎样解析的

:hover能用于img标签么?貌似在我的印象中它只能用于a链接,但是出于代码简洁的目的我不想再在外面套一个<a></a>

而且我现在是就事论事讨论这个情况的产生原因而非讨论如何解决,解决它很容易只要使我在主帖中列举的任一条件不成立即可.但是以一种学习的心态我想搞清楚出现这情况的本质原因,假如按照W3C标准不应该这样解析,那就是IE6.0的责任了

myqoo 2008-05-14

打赏
举报

FireFox会出现这现象吗？

其实这种效果用:hover来实现比较方便

owen1759 2008-05-13

打赏
举报

有没有人回答啊?

knowledge_Is_Life 2008-04-30

打赏
举报

支持搂主，收藏

owen1759 2008-04-29

打赏
举报

To 1楼:
我知道改变一些条件这个情况就会消失,包括我自己列举的那些出现条件中只要一个不符合,情况就会消失
但是我要说的就是具体到针对这个情况,为什么会出现图片跑动?我可只改变了它的src啊

首先,我是没有改变它的任何CSS样式的,那么"跳动"前后两个位置中间必然有一个是错误的位置啊
完全相同的CSS出现两种不同位置这本身就是不可以的

街头小贩 2008-04-29

打赏
举报

MSDN:http://msdn2.microsoft.com/en-us/library/bb250395.aspx

街头小贩 2008-04-29

打赏
举报

try:

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>这是不是Bug</title>

</head>

<body>

    <div style="position:relative;">

        <img src="1.gif" style="float:left;display:inline;margin:200px 400px;padding:0;" onmouseover="this.src='2.gif';" onmouseout="this.src='1.gif';"/>

    </div>

</body>

</html>