我创建了这个 html 页面。它在 chrome 和 IE 中工作正常，但在 firefox 中 fix_div 从容器到右侧。我找不到任何问题。如何处理这个？请帮忙。
CSS
.container {
width: 1300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#game {
height:auto;
}
#header {
bkground-color: #f2f2f2;
width: 100%;
height:91px;
}
#content {
float: left;
width: 1000px;
border: 1px solid #b5b5b5;
}
.extra_div {
float:left;
width:140px;
height:520px;
}
#tabs {
background-color: #131313;
float: left;
width: 100%;
height:50px;
}
#tabs ul {
display: table;
table-layout:fixed;
text-align: center;
border-spacing:12px;
}
#tabs li {
display: table-cell;
width: 12%;
vertical-align: bottom;
margin-left:15px;
}
#tabs a {
width:75%;
display: block;
text-decoration:none;
padding:5px 5px 5px 5px;
background-color:#066;
color: white;
border:thin #030;
border-radius: 3px 3px 3px 3px;
}
.fix_div {
width:1000px;
height:120px;
}
.fix_tbl {
width:100%;
height:auto;
font-family:"Helvetica", Arial, sans-serif;
border-collapse:collapse;
border-width:1px;
border-style:solid;
border-color:#b5b5b5;
}
</style>
HTML
<body>
<div id="header"></div>
<div class="container">
<div class="extra_div"></div>
<div id="content">
<div id="tabs">
<ul>
<li><a href="">home</a>
</li>
<li><a href="">link 1</a>
</li>
<li><a href="">link 2</a>
</li>
<li><a href="">link 3</a>
</li>
<li><a href="">link 4</a>
</li>
<li><a href="">link 5</a>
</li>
<li><a href="">link 6</a>
</li>
</ul>
</div>
<div id="game">
<div class="fix_div">
<table class="fix_tbl">
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
<td>entry 4</td>
<td>entry 5</td>
<td>entry 6</td>
</tr>
</table>
</div>
</div>
</div>
<div class="extra_div"></div>
</div>
</body>
最佳答案
您需要添加一行 CSS 来修复它。
#game { height:auto; clear:both; }
希望对你有所帮助。
关于css - div 在 Firefox 中超出容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21621682/