为啥我的 div 被平板电脑上的表格弄乱了？
Posted
技术标签:
【中文标题】为啥我的 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 我编辑了帖子并添加了实际代码和链接以查看它的实际效果 【参考方案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 会变窄并且看起来更小。以上是关于为啥我的 div 被平板电脑上的表格弄乱了？的主要内容，如果未能解决你的问题，请参考以下文章
从组件调用的 angular 4 指令的多个实例弄乱了输入值