iPhone Safari：最后一个孩子没有在表格中渲染

我有一个响应式布局，低于某个断点，只显示表格的第一列和最后一列，以减少所需的空间量。iPhone Safari：最后一个孩子没有在表格中渲染

这里是CSS ...

@media only screen and (max-width: 749px) { 
    #content-container table thead th { 
     display: none; 
    } 
    #content-container table thead th:first-child { 
     display: table-cell !important; 
    } 
    #content-container table thead th:last-child { 
     display: table-cell !important; 
    } 
} 

@media only screen and (max-width: 749px) { 
    #content-container table tbody tr td { 
     display: none; 
    } 
    #content-container table tbody tr td:first-child { 
     display: table-cell !important; 
    } 
    #content-container table tbody tr td:last-child { 
     display: table-cell !important; 
    } 
}

的HTML是刚刚由table，thead，th，tbody，td一个简单的表，并在最后一列也a属性。

<table> 
    <thead> 
     <tr> 
      <th>Flight</th> 
      <th>Text</th> 
      <th>Text</th> 
      <th>Text</th> 
      <th>Text</th> 
      <th style="width: 140px;">Options</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Text</td> 
      <td>Text</td> 
      <td>Text</td> 
      <td>Text</td> 
      <td>Text</td> 
      <td style="width: 140px;"> 
       <a style="display: inline-block;" href="#">Remove</a> 
       <a style="display: inline-block;" href="#">Brief</a> 
      </td> 
     </tr> 
    </tbody> 
</table>

但是，这会在iPhone屏幕上显示时产生奇怪的结果。 Image showing how the last column is not rendering.

正如你所看到的，只有一列。最后一列没有呈现。

旋转设备横向并将其返回到纵向会使最后一列显示（有时），这很奇怪。见下文。

This shows what the table should actually look like.

这个问题是推动我逼疯了，我将不胜感激任何帮助！

来源

2013-02-18 Kieran

你可以用这个jsfiddle吗？这将是更容易看和改变。和想要测试的想法一样，尝试在按钮上设置'-webkit-transform：translateZ（0）'，看看它能否修复这个错误。 – 2013-02-23 07:47:24

@AlexeyIvanov我可以做，但它在桌面上完美地工作 - 只是不在iPhone上！我会尝试你的建议，非常感谢！ – Kieran 2013-02-23 11:44:55

根据Quirksmode list，它支持，但仅限于静态内容。一种可能的解决方法是改为提供列类。

来源

2013-03-05 09:34:42

iPhone Safari：最后一个孩子没有在表格中渲染

回答

相关问题