为什么我的 div 被平板电脑上的表格弄乱了？答案

【问题标题】：Why is my div being messed up with a table on a tablet?为什么我的 div 被平板电脑上的表格弄乱了？
【发布时间】：2013-07-02 23:28:05
【问题描述】：

看看下面的代码就知道我的问题了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<body>


<div style='width:100%; background:#CCCCCC; padding:0px; margin:0px; margin-bottom:20px; border:1px solid #CCC;'>

   <div style='float:left'>
      <a href='#' title='CSS TEST'><span style='font-size:30px;'>TEST for CSS DIV</span></a>
   </div>

   <div style='float:right'>
      Stuff on the right
   </div>

   <div style='clear:both;'></div>

</div>

<table cellspacing='0' cellpadding='2' align='center' width='1200' border='1'>

   <tr>

   <td> COL1 </td>
   <td> COL3 </td>

   </tr>

</table>

</body>

</html>

如果在平板电脑上查看，上述内容会将我的 div 从 100% 降低。但是在电脑上可以正常使用。

如果我删除表格，则 div 跨度为 100%

任何帮助将不胜感激。

你可以在http://zeissimages.com/test.html看到这个代码

只有在删除表定义时，它才能在平板电脑上正常工作。

【问题讨论】：

一定是一些我们在这里看不到的 CSS 东西。你能把你的代码放在一个 php 文件之外并重现这个问题吗？
@clrockwell 我编辑了帖子并添加了实际代码和链接以查看它的实际效果

标签： html css html-table width

【解决方案1】：

好的。我无法在任何浏览器上重现（包括切换用户代理以模仿平板电脑），但我在 2 个 HP 触摸板（一个带有库存 WebOS，另一个带有 Android ICS）上看到了错误。如果我将代码放入 jsfiddle 并在平板电脑上（以嵌入式模式）查看，则问题不存在。

首先，您应该移动您的<div style="clear:both"></div>，使其位于您的第一个主 div 和表格之间，例如：

<div>
</div>
<div style="clear:both"></div>
<table></table>

这能解决吗？

以防万一，我会提到你不应该包含所有这些内联样式，除非它是唯一的选择。此外，如果您清除表格，则可以完全排除清除 div。

【讨论】：

我尝试了你的建议，结果更糟：（对不起：）这真的很令人费解，因为它的样式是如此基本。我只是无法理解这张桌子上的 goig 是什么。

【解决方案2】：

你不是说：

<div style="width:100%">
bla bla bla
</div>

<table style="width:800px;">
..
..
</table>

如果没有真正的代码，无法提出太多建议......

【讨论】：

我将真实代码添加到原始帖子中。如果去掉表格代码，则 div 会跨越平板电脑窗口的整个宽度。如果插入表格代码，则 div 会变窄并且看起来更小。