防止鼠标悬停在 IE8 中时跳动字段集
我在字段集中有一个字段集。每种类型的字段集在悬停时都会改变颜色。在 Firefox 中工作得很好，但在 IE8 和 IE8 的 IE7 兼容模式下，当我将鼠标悬停在子字段集上时，它会跳转（看起来有些填充被删除，但这不是我的 css 所说的）。
有人可以帮我弄清楚如何防止 IE 中的跳跃效应吗？为什么当鼠标悬停在子字段集上时会跳转，而不是父字段集？
<!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>
<style type="text/css">
fieldset.property { background-color: #EDF5FF; }
fieldset.property:hover { background-color: #C1DDFF; }
fieldset.service:hover { background-color:#EDF5FF; }
</style>
</head>
<body>
<fieldset class="property">
Parent fieldset<br />
Parent fieldset<br />
Parent fieldset<br />
<fieldset class="service">
Child<br />
Child<br />
Child<br />
</fieldset>
Parent fieldset<br />
Parent fieldset<br />
Parent fieldset<br />
</fieldset>
</body>
I have a fieldset inside of a fieldset. Each type of fieldset changes color when hovered over. Works great in Firefox, but in IE8 and IE8 in IE7 compat mode, when I hover over the child fieldset, it jumps (it looks like some padding gets removed, but that's not what my css says).
Can someone help me figure out how to prevent the jumpy effect in IE? Why does the child fieldset jump when hovered over, but not the parent fieldset?
<!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>
<style type="text/css">
fieldset.property { background-color: #EDF5FF; }
fieldset.property:hover { background-color: #C1DDFF; }
fieldset.service:hover { background-color:#EDF5FF; }
</style>
</head>
<body>
<fieldset class="property">
Parent fieldset<br />
Parent fieldset<br />
Parent fieldset<br />
<fieldset class="service">
Child<br />
Child<br />
Child<br />
</fieldset>
Parent fieldset<br />
Parent fieldset<br />
Parent fieldset<br />
</fieldset>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我也不确定 IE 为何以这种方式对待子元素，但通过专门定义填充以及通常情况下的边距，可以防止这种情况。
字段集{边距：0;填充：0；}
I, too, am unsure exactly why IE treats child elements this way but by specifically defining the padding and often times, the margins as well, this can be prevented.
fieldset {margin:0; padding:0;}
我仍然不知道为什么 IE8 会让孩子紧张，但我找到了解决办法：
如果我添加一个样式来显式设置字段集的填充，则当鼠标悬停在字段集上时，字段集保持不变：
I still don't know why IE8 makes the child jumpy, but I found the fix:
If I add a style to explicitly set the padding on a fieldset, the fieldset stays the same when hovered over: