时间戳

首页 > 解决方案 > 导航栏下方的 IE 强制表（适用于 Chrome 和 FF）

html - 导航栏下方的 IE 强制表（适用于 Chrome 和 FF）

问题描述

我先道歉，我已经很多年没碰过这些东西了，所以我很生疏。

我有一个导航栏，它位于屏幕的左侧。还有一个位于页面中心的表格，它在 Chrome 和 Firefox 中运行良好。但是在 IE 中，表格被迫位于导航栏底部的下方。任何帮助将不胜感激。谢谢！

以下是描述正在发生的事情的几张图片：

外观： 使用 Chrome 和 Firefox

在 IE 中：使用 IE

这是我的 CSS 表：

/* The sidebar menu */
        .sidenav {
        height: 100%; /* Full-height: remove this if you want "auto" height */
        width: 200px; /* Set the width of the sidebar */
        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #dddddd;
        /* overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 1px;
        }

        /* The navigation menu links */
        .sidenav a {
            padding: 0px 8px 6px 8px;
            text-decoration: none;
            font-family: arial, sans-serif;
            font-size: 17px;
            color: #111;
            display: block;
        }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #2F7BDC;
        }

        /* Style page content */
        .main {
            margin-left: 200px; /* Same as the width of the sidebar */
            padding: 0px 10px;
            font-family: arial, sans-serif;
            font-size: 17px;
            color: #111;
            display: block;
        }

        /* Table Style */
        .error {color: #FF0000;}
        table {
            font-family: arial, sans-serif;
            font-size: 13px;
            border-collapse: collapse;
            width: 50%;
            vertical-align: top;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
            font-size: 13px;
        }
        .tdright{
            text-align: right;
        }
         tr:nth-child(odd) {
            background-color: #dddddd;
        }

这是HTML：

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
    <script src="//code.jquery.com/jquery.min.js"></script>
</head>

<body>
    <!-- Side navigation -->
    <div id="nav-placeholder">

    </div>
    <script>
        $.get("navbar.html", function(data){
        $("#nav-placeholder").replaceWith(data);
        });
    </script>

    <!-- Page content -->

    <div class="main">
        <form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
            <center>
        <table>
            <tr>
                <td colspan="2"><h2><center>Submit Info</h2></center></td>
            </tr>

            <tr>
                <td class="tdright">Comments:</td>
                <td><textarea name="comments" rows="3" cols="30"></textarea></td>
            </tr>
            <tr>
                <td class="tdright">Name:</td>
                <td><input type="text" name="name"></td>
            </tr>
            <tr>
                <td colspan='2'><input type="submit" name="submit" value="Submit">
                </td>

            </tr>
        </table>
            </center>

        </form>
    </div>

</body>

这是我正在调用的 navbar.html：

<div class="sidenav">
<table> 
    <tr>
        <td><img src="images/image.jpg" width="180px"></td>
    </tr>
    <tr>
        <td><center><h2>Links</h2></center></td>
    </tr>
</table>
<a href="comments.php">Submit Comments</a>
<a href="reports.php">Reports</a>
<a href="#">Placeholder 1</a>
<a href="#">Placeholder 2</a>

标签： htmlcss

解决方案

推荐阅读