javascript - 为什么 或 边框在 mozilla 和 IE 中没有显示(我在这些 或 上使用了 Jquery UI resizable() 函数)，但在 chrome 中却工作正常？

Question

这是我的表格的屏幕截图，其中两个 [th] 和两个 [td] 由 jquery-ui resizable() 函数调整大小。我使用了 Jquery-1.10.2 和 Jquery-ui 1.10.2。现在边框在 Chrome 上没问题，但在 IE 或 Mozilla 上不显示

Chrome 屏幕截图:

Mozilla 或 IE 屏幕截图:

这两个表的代码如下:

<table style="background-color: rgb(255, 255, 255); border-width: 2px; border-style: solid; border-color: rgb(0, 41, 135); position: relative;">
    <tr>
       <th class="ui-resizable" style="height: 25px; width: 120px; border-width: 1px; border-style: solid; border-color: rgb(0, 41, 135);text-align: center;">
          <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
       </th>
       <th class="ui-resizable" style="height: 25px; width: 120px; border-width: 1px; border-style: solid; border-color: rgb(0, 41, 135); text-align: center;">
          <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
       </td>
    </tr>
    <tr>
       <td class="ui-resizable" style="height: 25px; width: 120px; border-width: 1px; border-style: solid; border-color: rgb(0, 41, 135); text-align: center;">
          <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
       </td>
       <td class="ui-resizable" style="height: 25px; width: 120px; border-width: 1px; border-style: solid; border-color: rgb(0, 41, 135); text-align: center;">
          <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
          <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
       </td>
    </tr>
 </table>

Answer 1

使用 jquery ui resizable 函数使您的表格单元格边框折叠。您可以在表格标签中添加样式 border-collapse:initial，这样您的边框就会可见。

CSS:

table{
border-collapse:initial;
}

或者内联添加此属性。