Chrome 弄乱了桌子

Question

所以我的问题是，虽然该网站在 FireFox (screenshot) 中看起来不错，但它与 Chrome (screenshot) 中的表格有点混乱。
我已经验证了我的 html 和 css 并尝试了其他一些东西，但我不知道如何解决这个问题。

HTML：

<div id="top" class="topbg" style="width: 100%; height: 457px;">
<table style="width: 100%">
    <tr>
        <td style="width: 459px; height: 102px"></td>
        <td style="height: 102px; width: 433px;">
        <div style="clear: both;" class="toptitle"></div>
        </td>
        <td style="height: 102px; width: 545px;">
        <table cellpadding="0" cellspacing="0" style="width: 99%; height: 105px">
            <tr>
                <td class="auto-style1" style="height: 28px">
                <a href="#"><img alt="" height="18" src="flags/de.png" width="25" />&nbsp;</a>
                <a href="index-it.html"><img alt="" height="18" src="flags/it.png" width="25" />&nbsp;</a>
                <a href="index-en.html"><img alt="" height="18" src="flags/gb.png" width="25" /></a>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
        </table>
        </td>
        <td style="height: 102px"></td>
    </tr>
    <tr>
        <td style="width: 459px; height: 243px"></td>
        <td style="height: 243px; width: 433px;"></td>
        <td style="height: 243px" colspan="2"></td>
    </tr>
    <tr>
        <td style="width: 459px; height: 70px"></td>
        <td style="height: 70px" colspan="3"><a style="clear: both;" href="#" class="btn1">Verfügbarkeit</a></td>
    </tr>
</table>

CSS：

.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
.bgimg {
    background-image: url(images/bg.png);
}
.topbg {
    background-image: url(images/topbg.jpg);
}
.topbg2{
    background-image: url(images/topbg2.jpg);
}
.toptitle{
    background-image: url(images/toptitle.png);
    height:110px;
    width:270px;
}

.link {
  color: #d2c13f;
  background-color: transparent ;
  text-decoration: none;
}
.link:hover {
  color: white ;
  background-color: transparent ;
}

.wrapper {
        background: #595959;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        display: inline;
    }
    .wrapper li {
        float: left;
        padding: 0px 0px;
        border: 0px solid black;
    }

谢谢大家！

Answer 1

http://shouldiusetablesforlayout.com/

现在是非自命不凡的答案： 你真的不应该使用表格进行布局。如果您知道如何设置这么多样式，那么您应该花很少的时间来学习基本的 CSS 定位。 Chris Coyiers 的文章是一个很好的起点： http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

然后使用<div> 元素来制作您的基本页面布局。