Question

Stackoverflow上有2个其他线程遇到此问题。既不适用于我。一个是关于javascript的东西。我在浏览器上禁用了javascript，仍然这样做。

另一个是adsense横幅，我在这个页面上没有。

有人可以告诉我为什么这个加载到右边，然后在页面完全加载时居中？

谢谢！

http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13

Answer 1

这是因为表格上的宽度设置为100％，其中两列用*来确定填充。 *字符告诉表确定剩余的宽度并用表填充它。所以会发生什么是浏览器渲染第一个*减去中心列的固定宽度。在定心发生之前，它甚至不会渲染第三列。您可以使用firebug查看此信息，并在仍然与右侧对齐时停止加载。

<div class="SiteBody">
 <table width="100%">
  <tbody>
   <tr>
    <td width="*"></td>
    <td width="1062"></td>
    <td width="*"></td>
   </tr>
  </tbody>
 </table>
</div>

我会说这一次，因为很多人可能会跳这个。你不应该使用表来设置布局这是不好的做法，它可以给你带来像你所看到的问题。那就是说，我的良心很清楚。

您可以删除第一个和第三个TD，删除宽度100％并在父容器中设置背景。在我看来，这将是处理它的最佳方式。将边距设置为0，自动，这应该为您提供您想要的一切。

<div class="SiteBody">
 <div class="SiteMiddle">//site content</div>
</div>

<style>
 .SiteBody { background: transparent url(image of background) }
 .SiteMiddle { width:1062px; margin: 0, auto; }
</style>

或者这可能是最好的方式，因为它对div进行分层并允许您设置左右两侧的背景，并仍设置具有正确宽度的居中内容

<div class="SiteBody">
 <div class="SiteLeft">
  <div class="SiteRight">
   <div class="SiteMiddle">//site content</div>
  </div>
 </div>
</div>

<style>
 .SiteBody {  }
 .SiteLeft { background: transparent url(image of left background) no-repeat left top; }
 .SiteRight { background: transparent url(image of left background) no-repeat right top; }
 .SiteMiddle { margin: 0, auto; width: 1062px; }
</style>

Answer 2

不要使用表格进行布局。

它们会导致页面渲染速度变慢，并可能导致调整很晚。我相信你已经注意到了这一点;）

网站设计看起来并不复杂。我会建议你重新制作它而不使用表作为布局（当然播放列表的表格很好）。

Answer 3

嗯，这很难说，但这可能是因为右边的方框有“位置：绝对”

也许你应该摆脱以主要内容为中心的表格，以免混淆浏览器关于页面上每个元素的位置。

尝试使用HTML：

<div class="SiteBody">
<!-- remove table stuff here -->
  <div class="container">
    <!-- Your content -->
  </div>
<!-- remove table stuff here -->
</div>

使用这个CSS：

.SiteBody {text-align:center;}
.container {width:1062px;margin:0 auto;text-align:left;position:relative;}

Answer 4

我猜它是Cufon--在加载dom后替换你的字体。你能否取代Cufon，看看你是否还有这个问题？

如果不能，那么您是否可以删除所有脚本标记的页面测试版本？

Answer 5

不要将TABLES用于布局。如果使用TABLES，请使用固定宽度的单元格。
将JS脚本标记移动到HTML代码的末尾。
尝试逐个禁用JS脚本，看看发生了什么。
使用Firebug实时监控HTML呈现。

Answer 6

在对您的网站进行分析后，以下是我的评论： -

页面总重量 2736.6 Kbytes （很高）
CSSImages重量 986 Kbytes
JS文件权重 623.2千字节
如果您可以在服务器上使用缓存 CSS ＆amp; JS 文件然后页面加载将减少
如 CBRRacer 所述，您也应该处理

Answer 7

我从网站上删除了所有javascript，cufon，绝对div等

http://www.halotracker.com/Test/Halo%20%20Reach%20Challenges.htm

唯一剩下的是桌子。而且我之前看过这些表格。我总是使用表格，随机启动这个问题。无论如何，无法弄清楚，给我的答案都没有完整。

享受我的声誉点CBRacer。

网站加载到右边，直到完成，然后中心

7 个答案: