0

查看以下代码以了解我的问题。

<!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实时查看此代码

再次，仅当您删除表定义时，它才能在平板电脑上正常工作。

4

2 回答 2

0

你不是说：

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

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

没有真正的代码就不能提出太多建议......

于 2013-07-04T23:15:13.430 回答
0

OK. I can not reproduce on any browser (including switching user agents to mimic a tablet) but I see the error on 2 HP touchpads (one with stock WebOS, the other with Android ICS). If I put the code in jsfiddle and view it on a tablet (in embedded mode) the issue doesn't exist.

First, you should move your <div style="clear:both"></div> so that it is between your first main div and the table, like:

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

Does that resolve it?

Just in case, I'll mention that you shouldn't include all those inline styles unless it's the only option. Additionally, you can exclude the clearing div altogether if you clear the table.

于 2013-07-05T23:39:06.807 回答