使用tr：hover css選擇器將樣式應用於表行在IE 8中不起作用（如果* tr> td> div>輸入文本*鼠標懸停操作）

Question

將鼠標懸停在row（tr）上將應用tr：hover規則，但是如果將鼠標懸停在tr輸入子文本內容上，則會應用tr：hover規則。

我僅在IE-8中面臨此問題。 有誰能幫助我找出根本原因。

可以找到兩種情況

注意： Jsfiddle

<!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>

Answer 1

如果您放棄傳統方法，請使用一些jQuery：

$("tr").hover(
    function() {
        $(this).css('background-color','#0f0');
    }
);

Answer 2

似乎我找到了與此有關的東西。 IE 8錯誤

Answer 3

您可能要看幾個問題，但是主要問題似乎是DOCTYPE 。

指定的DOCTYPE以HTML4為目標，並引用xhtml 嚴格 DTD； 這意味着文檔應該是有效的xhtml文檔，並且不允許關閉input標簽，這會導致瀏覽器以怪癖模式運行，從而導致:hover損壞。

如果可以修改它，請嘗試使用有效的DOCTYPE進行更改，例如：

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

如果您必須保持HTML4模式，請使用后者。

另外， <meta http-equiv="x-ua-compatible" content="IE=8" >未被正確放置在head標簽內，這也可能導致渲染問題。

使用tr：hover css選擇器將樣式應用於表行在IE 8中不起作用（如果* tr> td> div>輸入文本*鼠標懸停操作）

問題描述

3 個解決方案

解決方案1
0 2015-05-26 06:43:52

解決方案2
0 2015-05-26 07:33:47

解決方案3
0 2015-05-26 07:47:35

使用tr：hover css選擇器將樣式應用於表行在IE 8中不起作用（如果* tr&gt; td&gt; div&gt;輸入文本*鼠標懸停操作）

問題描述

3 個解決方案

解決方案1 0 2015-05-26 06:43:52

解決方案2 0 2015-05-26 07:33:47

解決方案3 0 2015-05-26 07:47:35

使用tr：hover css選擇器將樣式應用於表行在IE 8中不起作用（如果* tr> td> div>輸入文本*鼠標懸停操作）

解決方案1
0 2015-05-26 06:43:52

解決方案2
0 2015-05-26 07:33:47

解決方案3
0 2015-05-26 07:47:35