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>元素进行基本页面布局。

镀铬混乱桌子

1 个答案: