1

FirefoxでもChromeと同じ結果を得るのに問題があります。Chromeでは、レイアウトは私が望むとおりですが、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;
}

サイドバーに15％、記事に85％の幅を定義していることがわかります。スクリーンショットは、ボックスセクションの外側を示しています。

ボックスレイアウトを使用していて、mozも定義されていることを確認しました。私は何が欠けていますか？

4

1 に答える 1

1

まあ、私はばかだった.サイドバーに特定の幅を定義し、記事を柔軟にしなければならなかった.

于 2012-09-21T10:01:11.820 に答える