1
我遇到问题，在Firefox中获得与Chrome中相同的结果。 在Chrome中，布局是我想要的，而在Firefox中它看起来不同。Firefox中的页面布局不同
这里是标记：
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Maple 16</h1>
</header>
<div id="box">
<aside id="sidebar">
<table cellpadding="0" cellspacing="15px">
<col span="7" width="160px" />
<row span="7" width="160px" />
<tr>
<td colspan="1" bgcolor="#40b040">
<a href="../index.html" ><img src="../images/buttons/home.png" class="img"></a>
</td>
</tr>
<tr>
<td colspan="1" bgcolor="#ffbf00" class="img">
<img src="../images/buttons/shop.png">
</td>
</tr>
<tr>
<td colspan="1" bgcolor="#4040ff" class="img">
<img src="../images/buttons/download.png">
</td>
</tr>
</table>
</aside>
<section>
<article id="maple_article" dir="rtl" align="right">
<h1>מהי Maple?</h1><br />
<p>
Maple היא תוכנה לפתרון בעיות מתמטיות הנדסיות המשלבת יכולות סימבוליות, ממשק גרפי נוח לשימוש ומנוע נומרי.<br />
כתיבת הקוד והטקסט הינה כתיבה אינטואיטיבית ונוחה לעריכה.<br />
כמו כן קיים תיעוד מלא של תהליך הפתרון אשר מהווה מסמך.<br />
</p>
<p class="notice">
היות ו Maple אינה תוכנה אמריקאית, Maple ושרשרת המוצרים הנלווים ל Maple אינם תחת הגבלות שימוש והפצה של ארה"ב.
השימוש ב Maple אינו מצריך אישור EULA.
</p>
<h2>תכונותיה העיקריות של Maple:</h2>
<br />
<ul>
<li>
יכולות גרפיות גבוהות, יצירת אפליקציות אנימציה בקלות וממשק משתמש גרפי (GUI) נוח ואינטואיטיבי.
</li>
<li>
במהלך הכתיבה ב Maple מתבצע תיעוד מלא של תהליך הפתרון וכתיבת המסמך – תהליך חשוב והכרחי לשימור ידע.
</li>
<li>
פתרון מגוון רחב של בעיות מתמטיות (אלגברה, חדוו"א, משוואות דיפרנציאליות, סטטיסטיקה הסתברות ועוד..) המתבצע בקלות וללא הגבלת דיוק באמצעות המנוע הנומרי החזק של התוכנה.
</li>
<li>
ל Maple סביבת תכנות מלאה הניתנת להרחבה. כמו כן, Maple יודע לבצע חישובים של קוד הנכתב בשפת תכנות אחרת.
</li>
<li>
ל Maple אפשרות להדריך (ולתקן במקרה הצורך) בפתרון בעיות מתמטיות שונות באמצעות תרגולים ופותרנים מובנים בתוכנה.
<li>
<li>
ל Maple יכולת להתממשק עם מגוון רחב של תוכנות לדוגמת Matlab ToolChain, Optimus ועוד..
</li>
</ul>
<br /><br />
<p>
כיום קיימים ב Maple יותר מ-170 חבילות תוכן (Packages) במגוון רחב של נושאים אשר מגיעים עם התוכנה עצמה וללא תשלום נוסף.
<p>
</article>
</section>
</div>
<div id="screenshots">
<h2>Screenshots</h2>
<table cellspacing="15px" id="shots_table">
<tr>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
</tr>
</table>
</div>
<footer id="footer">
Copyrights Digisec Technology. All rights reserved.
</footer>
</div>
</body>
正如你所看到的，我使用的是大包装的整个网站，并框文章页。 所以盒子将包含边栏和文章。
以下是这似乎是相关的CSS部分：
#top_header{
margin-top: 5px;
padding: 20px;
}
#footer{
color: grey;
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
/*Articles*/
#box{
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: -o-box;
-o-box-orient: horizontal;
margin-bottom: 10px;
}
#maple_article{
width: 85%;
color: #f8f8f8;
font-size: 16px;
margin-left: 15px;
}
#sidebar{
width: 15%;
}
.notice{
color: #FF6666 ;
}
/*ScreenShots*/
#screenshots{
text-align: right;
}
#shots_table{
float: right;
}
你可以看到，我定义侧边栏和85％的文章15％的宽度。 屏幕截图在我们的盒子外面。
我正在使用盒子布局，并确保moz也被定义。 我错过了什么？