Html 为什么我的表格单元格（偶尔）不显示'；悬停'；在我使用Chrome开发者工具强制元素状态之前的行为？

我有一个表格，使用了以下CSS和HTML：

.price{
位置：相对位置；
显示：块；
文本对齐：居中；
}
.详情{
背景：无重复滚动0 0#EEEEEE；
颜色：#333333；
最小宽度：200px；
宽度：自动；
身高：0；
溢出：隐藏；
左：0；
位置：绝对位置；
-webkit过渡：所有.3s轻松；
-moz过渡：全部.3s轻松；
-ms过渡：全部。3秒轻松；
-o-过渡：全部3秒轻松；
过渡：全部。3秒轻松；
} 
.price:hover>.detail，.price:hover>.notmuchdata>.detail{
显示：块；
溢出：自动；
左：0px；
宽度：120px；
高度：60px；
z指数：10；
}

1.56
1.7% @ 1.6

很难说，因为我无法复制它，但我首先要消除所有不必要的CSS声明（并为删除线创建一个类——尽管这可能不是问题）：

.price{
文本对齐：居中；
}
.罢工{
背景色：白色；
文字装饰：线条贯通；
}
.详情{
背景：无重复滚动0 0#EEEEEE；
颜色：#333333；
最小宽度：200px；/*我的原始问题
在我上面的原始问题中，为了清晰起见，我尽量简化问题的细节

更多细节
但是，我现在添加了一个事实，即AJAX在页面的其他地方都得到了使用

我认为这可能是相关的，因为问题的“偶然”性质

AJAX请求用于调用一个PHP页面，该页面将发送回纯JSON，然后对其进行处理，以便在页面上显示图形

通常情况下，这是正常的，但在这个php页面上偶尔会出现错误，AJAX请求没有发回纯JSON，而是发送了一个包含警告消息的字符串。这导致了一条错误消息出现在Chrome Developer Tools的“JavaScript控制台”部分（当然，图形没有按应有的方式显示）

我认为这种行为与我上面的问题无关，因为当我注意到它发生时，悬停似乎正常工作。也就是说，它似乎只影响图表

然而，正如我所说，这个问题的“偶然”性质让我怀疑是否有某种联系

原因是什么？
我的理论是，当JavaScript代码中遇到问题时（由于AJAX请求有时不返回纯JSON），这反过来会导致执行CSS悬停行为时出现问题，当鼠标悬停在单元格上时，应该激活CSS悬停行为

采取的具体行动
因此，我采取的行动如下：

我已经在php文件的开头添加了
error\u reporting（E\u error）；
，该文件提供了对AJAX请求的响应。这将有望确保该文件只发回我的页面所期望的纯JSON

为了完整性起见，我觉得我还应该提到，我已经将处于悬停“模式”时div的
z-index
设置为一个大数字（100），尽管我怀疑这是否会产生影响

它解决了问题吗？
如上所述，此问题的“难以重现”性质使我们很难知道此操作是否成功，但现在已经过了几天，问题没有再次报告。
与任何只偶尔出现和（有时）出现的错误一样当你打开开发工具时，调试将是一件非常痛苦的事情。有一些历史性的错误与悬停有关，但我记得上次的浏览器是在那些年前修复的。我同意@Nit这将是一个很难调试的问题，因为它只是偶尔出现。你知道问题发生时正在使用哪些浏览器吗？这可能是一个与浏览器相关的问题。我会尝试将1.56包装在它自己的DIV中。为什么要将
TD
设置为
position:relative
和
display:block
？这些似乎是导致问题的候选项。@KevinBoucher，我正在将TD设置为
position:relative
，这样当我设置
left:0px
对于附带的div，这个
0px
是从表格单元格中测量的，而不是从页面的整个html标记中测量的。因此，div将显示在单元格的右侧，而不是页面最左侧的右侧。请参阅w3schools CSS定位教程（）：“绝对位置元素相对于第一个非静态位置的父元素进行定位。如果未找到此类元素，则包含的块为“@crazymatt使用的浏览器是Google Chrome。该问题似乎也出现在其他浏览器上，例如Firefox、Internet Explorer、Opera。
.price { 
    text-align: center; 
}

.strike {
    background-color: white;
    text-decoration: line-through;
}

.detail { 
    background: none repeat scroll 0 0 #EEEEEE; 
    color: #333333; 
    min-width: 200px; /* <-- why min-width:200px here, but width: 120px on hover?  */
    height: 0; 
    overflow:hidden; 
    left: 0; 
    position: absolute; 
    -webkit-transition: all .3s ease;  
    -moz-transition: all .3s ease;  
    -ms-transition: all .3s ease;  
    -o-transition: all .3s ease;  
    transition: all .3s ease; 
} 


.price:hover .detail {
    width: 120px;
    height: 60px;
}

<table>
    <tr>
        <td class="price strike">1.56
            <div class="detail">1.7% @ 1.6</div></td>
    </tr>
</table>