Question

我在fieldset中有一个fieldset。每种类型的字段集在悬停时都会改变颜色。在Firefox中工作得很好，但是在IE7和IE8的IE7 compat模式下，当我将鼠标悬停在子字段集上时，它会跳转（看起来有些填充被删除了，但这不是我的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>

Answer 1

我也不确定为什么IE会以这种方式处理子元素，但通过专门定义填充，通常还有边距，这可以防止。

fieldset {margin：0;填充：0;}

Answer 2

我仍然不知道为什么IE8让孩子跳起来，但我找到了修复：

如果我添加一个样式来显式设置字段集上的填充，则字段集在悬停时保持不变：

/* Add to make rendering in IE and Firefox the same /*
fieldset { padding:2px; }

在IE8中悬停时防止跳转字段集

2 个答案: