个人中心
gpt4 book ai didi

html - Firefox 中的页面布局不同

转载 作者：行者123 更新时间：2023-11-28 18:36:29 24 4
gpt4 key购买 nike

我无法在 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。我错过了什么？

最佳答案

好吧，我很笨，不得不为侧边栏定义特定的宽度并使文章灵活。

关于html - Firefox 中的页面布局不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12527677/

24 4 0
文章推荐： iphone - 使用 UIRefreshControl
文章推荐： Python确保文件以行返回结尾？
文章推荐： ios - 点击并按住以添加 pin google maps api ios
文章推荐： css - 带有图像背景和文本的按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com