为什么或边框没有显示（我在这些或上使用了Jquery UI resizable（）函数在mozilla和IE中，但是对于chrome工作正常吗？

Question

这是我的表格的屏幕截图，其中两个[th]和两个[td]可通过jquery-ui resizable（）函数调整大小。 我使用了Jquery-1.10.2和Jquery-ui 1.10.2。 现在边框适用于Chrome，但不会在IE或Mozilla上显示

Chrome ScreenShot：

Mozilla或IE ScreenShot：

这两个表的代码如下：

<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;
}

或 内联添加此属性。

Answer 2

将该代码放入笔中会在所有浏览器中生成完美的边框，因此我假设您不知道的某些CSS规则会导致此行为。检查Mozilla中的F12，IE和Chrome是否正在加载CSS文件以及哪些CSS规则正在影响该表。

Answer 3

代码不正确。

在第二行第二行 而不是关闭 </th> ，您写了 </td> 。请改变这个。如果正确编写了HTML代码，那么它将在所有浏览器中正常工作。

仅供参考：我尝试过IE8，FF [35.0.1]和Chrome [版本40.0.2214.94]并且在所有3个浏览器中都运行良好