表格单元格内的 jQuery UI 按钮 - 渲染问题答案

【问题标题】：jQuery UI Button inside table cell - rendering issue表格单元格内的 jQuery UI 按钮 - 渲染问题
【发布时间】：2012-12-18 16:10:26
【问题描述】：

我正在使用 jQuery 按钮，特别是这个例子：

http://jqueryui.com/button/#splitbutton

我已经为每一行放置了这个标记 incide 表 td：

<div>
    <button id="possible-actions">Action</button>
</div>
<ul>
    <li><a href="#">Reopen</a></li>
    <li><a href="#">Close</a></li>
    <li><a href="#">Delete</a></li>
    <li><a href="#">Move...</a></li>
</ul>

当然，我已经相应地修改了 javascript。但是，现在我正在努力解决 Internet Explorer 8 中的渲染问题。正在发生的事情是，其他单元格的内容被渲染了一个错误 - 例如，行的高度很奇怪，一些单元格的内容被渲染在单元格之外。但是当我将鼠标移到行上时，似乎 IE 会重绘/刷新并且行是固定的。

我没有任何鼠标悬停处理程序或其他事件。普通表 + 这个 jQuery UI 按钮。我想知道这是否会发生，因为我在 td 中使用了块元素，或者我在页面加载后动态创建了这些按钮并且浏览器出现了渲染表问题。

仅供参考：Google Chrome 和 FF 没有这个问题。

【问题讨论】：

IE 总是遇到 jQuery 问题...
请发布一个 jsFiddle 示例。
在 jsFiddle 上可能很难重现，但我会尝试

标签： jquery-ui css jquery-ui-button

【解决方案1】：

将标记更改为：

<span style="display: inline-block">
    <button id="possible-actions">Action</button>
</span>
<ul style="display: none">
    <li><a href="#">Reopen</a></li>
    <li><a href="#">Close</a></li>
    <li><a href="#">Delete</a></li>
    <li><a href="#">Move...</a></li>
</ul>

解决了这个问题。我使用的样式是：

display: inline-block - 因为我需要控制一些宽度/高度尺寸
显示：无 - 因为我在单击按钮时按需创建和显示菜单

【讨论】：