我的 Chrome 在将鼠标悬停在表格内的 tr 元素上时似乎有一些问题。其他所有浏览器似乎都可以正常工作。 (Chrome 版本 15.0.874.121 m)。
我正在使用 jQuery 执行事件(是的，我需要使用 Javascript，因为我需要在用户将鼠标悬停在表上时实时更改表，所以 :hover 不是一个选项，即便如此，问题似乎也发生在那里)。
这是有问题的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>:(</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr").hover(function () {
$(this).css("background-color", "#aaaaaa");
}, function() {
$(this).css("background-color", "#555555");
});
});
</script>
<style type="text/css">
table, table tr, table tr td {
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
padding: 0px;
}
table {
width: 500px;
}
table tr {
background-color: #555555;
color: #FFFFFF;
}
/*table tr:hover {
background-color: #aaaaaa;
}*/
</style>
</head>
<body>
<table>
<tr><td>test1</td><td>this1</td><td>in1</td><td>chrome1</td></tr>
<tr><td>test2</td><td>this2</td><td>in2</td><td>chrome2</td></tr>
<tr><td>test3</td><td>this3</td><td>in3</td><td>chrome3</td></tr>
<tr><td>test4</td><td>this4</td><td>in4</td><td>chrome4</td></tr>
<tr><td>test5</td><td>this5</td><td>in5</td><td>chrome5</td></tr>
<tr><td>test6</td><td>this6</td><td>in6</td><td>chrome6</td></tr>
<tr><td>test7</td><td>this7</td><td>in7</td><td>chrome7</td></tr>
</table>
</body>
</html>
这是在网络服务器上运行的代码:
http://www.jalsoedesign.net/test/tabletest/tabletest.php
当悬停在单个 TD 元素的最末端(或开始)时(即使该函数使用 TR)，它似乎调用了“onmouseleave”javascript 函数。我也尝试过使用 onmouseover/onmouseout，但似乎没有什么不同。有什么想法吗？
编辑:
想通了。出于某些奇怪 的原因，在 td 元素上添加“position: relative”似乎可以解决这个问题。我不知道为什么会这样，所以如果有人有线索，请随时提供您的意见。 :)
2013 年 2 月 28 日更新:
这似乎不会发生在当前版本的 Chrome 中。
最佳答案
如前所述，但为了不让这个问题没有答案，解决方案是向所有 TD 元素添加一个 position: relative。
关于jquery - Chrome : Seems to add an invisible border when hovering over a tr，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8503383/