当用户将鼠标移出/移出TR以更改某些CSS颜色时,我将鼠标事件添加到HTML TR.但是在IE9中似乎存在一个问题,即每次CSS更改时表的高度都会不断增加.
注意:只有出现水平滚动条时才会出现此问题.
这是HTML.
<div style="width:100%;height:100%;">
<div class="grid">
<div class="grid-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
<tbody>
<tr>
<td style="width:3040px;" class="item">
<div>
Please mouse-over me and out
</div>
</td>
<td class="item">
<div>
Please mouse-over me and out
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
这是Javascript
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
});
}
);
这是CSS设置
html, body {height:100%}
body {
margin: 0; padding: 0 5px;
}
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; …以下示例使用HTML 4.01 Transitional doctype声明,span不会得到顶部和底部之间的特殊差距.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="background:red"><span>dark green</span></div>
</body>
</html>
CSS
span {
background: yellow;
color: black;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: normal;
}
但是,如果我们将其更改为使用HTML5声明<!DOCTYPE html>,则跨度将获得特殊差距.
以下是jsfiddle中的完整示例(如果您将Fiddle Options的DTD更改为使用HTML5,您将看到问题所在.