Question

这是我的第一个问题，我有点犹豫要问，因为有问题的代码在我的计算机上工作正常，只有在办公室环境中进行演示时（他们使用Internet Explorer 11，尽管一切正常，使用IE11来自它我的家用电脑，它遇到了问题。我已经广泛研究了兼容模式等，但是在他们的计算机上，Navbar总是与内容重叠。我正在使用Bootstrap和非常小的CSS。为了测试滚动功能（固定导航栏），重复了很多html表。如果有人有任何洞察力可以提供，或者可以在我的代码中发现可能导致此问题的任何内容，我将不胜感激！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
    <title>Order</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

        body {
            padding-top: 125px;
        }

        #header {
            height: 105px;
        }

    </style>

</head>
<body>
<!-- Static header with order information -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="row" id="header">
                <div class="col-xs-12">
                    <strong>Order#: </strong>%orderNumber
                </div>
                <div class="col-xs-12">
                    <strong>Order Date: </strong>%orderDate
                </div>
                <div class="col-xs-12">
                    <strong>Customer #: </strong>%customerNumber
                </div>
                <div class="col-xs-12">
                    <strong>CustomerName: </strong>%customerName
                </div>
                <div class="col-xs-12">
                    <strong>Changed By: </strong>%changedBy
                </div>
            </div>
        </div>
    </div>
<!-- Adaptive Table -->
    <div class="container-fluid">
        <div class="row">
            <table class="col-sm-12 table-striped table-condensed">         
                <thead>
                    <tr>
                        <th>Item #</th>
                        <th>Old Qty</th>
                        <th>New Qty</th>
                        <th>Stock</th>
                        <th>Cust Ord</th>
                        <th>Vend Ord</th>
                        <th>Min</th>
                        <th>Max</th>
                        <th>Usage</th>
                    </tr>
                </thead>            
                <tbody>                 
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>
                    <tr>
                        <td data-title="Item #">%itemNum</td>
                        <td data-title="Old Qty">%old</td>
                        <td data-title="New Qty">%new</td>
                        <td data-title="Stock">%stock</td>
                        <td data-title="Cust Ord">%custOrd</td>
                        <td data-title="Vend Ord">%vendOrd</td>
                        <td data-title="Min">%min</td>
                        <td data-title="Max">%max</td>
                        <td data-title="Usage">%use</td>
                    </tr>      
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>

Answer 1

如果没有看到导航栏在IE11中实际破坏的方式，很难确定究竟问题是什么。最有可能出现问题，因为导航栏的位置是固定的，并且IE没有按预期处理它。

以下是我尝试做的一些事情，可能有助于找出问题的根源：

尝试删除height:105px上的#header。您的标题内容可能会溢出导航栏。
尝试使用包含表格的div上的填充或边距替换身体类别上的填充。

Navbar在某些计算机上重叠

1 个答案: