使用tr：hover css选择器将样式应用于表行在IE 8中不起作用（如果* tr> td> div>输入文本*鼠标悬停操作）
[英]Applying style to Table row with tr:hover css selector is not working in IE 8 (in case of *tr>td>div>input text* mouse hover action)
问题描述
Mouse over the row(tr) is applying the tr:hover rule, but in case of mouse over the tr input child text content tr:hover rule is getting applied. 
将鼠标悬停在row（tr）上将应用tr：hover规则，但是如果将鼠标悬停在tr输入子文本内容上，则会应用tr：hover规则。
I am facing this issue only in IE-8. 我仅在IE-8中面临此问题。 Can any one help me to identify the root cause. 有谁能帮助我找出根本原因。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="x-ua-compatible" content="IE=8" >
<html>
<head>
<meta charset="utf-8">
<style type="text/css" media="screen">
tr{
border-width: 0;
margin: 0;
padding: 0;
background-color: transparent;
line-height: 23px;
height: 23px;
vertical-align: middle;
cursor: pointer;
}
table {
border: 1px solid #d3deed;
border-collapse: collapse;
table-layout: fixed;
position: relative;
border-spacing: 0;
width: 100%;
}
table thead tr {
position: relative;
}
table th,
table thead td,
table tfoot td {
border-width: .08em;
padding: 2px;
height: 16px;
}
table tbody td {
border: 1px solid #d3deed;
border-bottom-color: #d3deed;
border-top-color: #d3deed;
}
table th {
border: 1px solid #d3deed;
border-top: 0;
border-bottom: .24em solid #d3deed;
border-bottom: .24em solid #d3deed;
background-color: #e5edf5;
color: #696969;
font: bold 12px/1.5 'Lucida Grande', Tahoma, sans-serif;
}
table input{
border-style: solid;
background-color: transparent!important;
border: 0;
font: normal 12px/1.5 Arial,Helvetica,sans-serif;
width: 100%;
cursor: text;
height: 1.4em;
left: 0;
position: relative;
top: 0;
vertical-align: middle;
border-radius: 0;
-moz-border-radius: 0;
}
table tr:hover {
background-color: green!important;
}
</style>
</head>
<body>
<table>
<caption>Row hover</caption>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
</div>
</td>
<td>
<div>
<input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
</div>
</td>
<td>
<div>
<input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
</div>
</td>
<td>
<div>
<input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
</div>
</td>
</tr>
</tbody>
</table>
</body>
3 个解决方案
解决方案1
0 2015-05-26 06:43:52
If you give up on traditional methods, use some jQuery: 如果您放弃传统方法，请使用一些jQuery：
$("tr").hover(
function() {
$(this).css('background-color','#0f0');
}
);
解决方案2
0 2015-05-26 07:33:47
解决方案3
0 2015-05-26 07:47:35
There are a couple of issues you could look at, but the main problem seems to be the DOCTYPE . 您可能要看几个问题，但是主要问题似乎是DOCTYPE 。
The specified DOCTYPE targets HTML4 and refers to xhtml strict DTD; 指定的DOCTYPE以HTML4为目标，并引用xhtml 严格 DTD； it means the document should be a valid xhtml one, and not closing the input tags is not permitted causing the browser to run in quirks mode , causing the :hover to be broken. 这意味着文档应该是有效的xhtml文档，并且不允许关闭input标签，这会导致浏览器以怪癖模式运行，从而导致:hover损坏。
If you can modify it, try changing the DOCTYPE by valid ones, such as: 如果可以修改它，请尝试使用有效的DOCTYPE进行更改，例如：
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Use the latter if you have to remain in HTML4 mode. 如果您必须保持HTML4模式，请使用后者。
Also, the <meta http-equiv="x-ua-compatible" content="IE=8" > is not properly placed inside the head tag, which could also lead to rendering problems. 另外， <meta http-equiv="x-ua-compatible" content="IE=8" >未被正确放置在head标签内，这也可能导致渲染问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.