爲什麼我的div與平板電腦上的桌子混淆了？

看看下面的代碼，看看我的問題。爲什麼我的div與平板電腦上的桌子混淆了？

<!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％下降。但在PC上運行良好。

如果我刪除該表中，DIV跨越100％

任何幫助，將不勝感激。

你可以看到這個代碼住在http://zeissimages.com/test.html

也只如果刪除表定義它工作正常在平板電腦上。

來源

2013-07-04 user1970839

必須是一些CSS的東西，我們不能看到這裏。你可以把你的代碼放在一個php文件之外並重現這個問題嗎？ –

@clrockwell我編輯了帖子並添加了實際的代碼和鏈接，以便在行動中看到它 – user1970839

不要你的意思是：

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

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

不能沒有真正的代碼表明瞭...

來源

2013-07-04 23:15:13

我將真實代碼添加到原始帖子。如果你擺脫了表格代碼，div橫跨了平板電腦窗口的整個寬度。如果插入表格代碼，div變窄並且看起來更小。 – user1970839

確定。我無法在任何瀏覽器上進行復制（包括切換用戶代理以模擬平板電腦），但我在2個HP觸摸板（一個使用WebOS，另一個使用Android ICS）上看到錯誤。如果我將代碼放在jsfiddle中並在平板電腦上查看（嵌入模式下），則問題不存在。

首先，你應該將你的<div style="clear:both"></div>所以它是你的第一個主要的div和表之間，如：

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

這是否解決？

爲了以防萬一，我會提及您不應該包含所有這些內聯樣式，除非它是唯一的選項。此外，如果您清除表格，則可以完全排除清除分區。

來源

2013-07-05 23:39:06

我試過你的建議，它瘋了更糟:(對不起:)這真是令人費解，因爲它的造型是如此的基本。我無法理解這桌上的戈裏格是什麼。 – user1970839

到目前爲止沒有任何工作。有什麼想法嗎？ – user1970839

回答

相關問題