Bootstrap 粘性页眉和页脚答案

【问题标题】：Bootstrap sticky header and footerBootstrap 粘性页眉和页脚
【发布时间】：2014-12-28 05:55:34
【问题描述】：

嗨，我正在使用 twitter 引导程序进行网站设计。我的页眉和页脚很粘。它适用于笔记本电脑和大多数手机。但我面临三星系列和旧 IE 的问题。下面是我的代码。标题

<!DOC TYPE HTML>
<html>
<head>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/navbar-fixed-top.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href="css/carousel.css" rel="stylesheet">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top " role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                <ul class="nav navbar-nav">
                    <li> <a class="navbar-brand" href="#"><img src="images/Upper Logo.png" style="position:relative;top:-15px"></a> </li>
                </ul>
            </div>
            <div class="navbar-collapse collapse">
                <?php $directory = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://"; if ($_SERVER["SERVER_PORT"] != "80") { $directory .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; } else { $directory .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; } $test = explode('/',ltrim($directory)); // loop through each directory, check against the known directories, and add class $directories = array("index.php", "about_us.php","cs.php","products.php","services.php","contact_us.php"); // set home as 'index', but can be changed based of the home uri foreach ($directories as $folder){ $active[$folder] = ($test[4] == $folder)? "active":"noactive"; } ?>
                <ul class="nav navbar-nav navbar-right ">
                    <li class="<?php echo $active['index.php']?>"><a href="index.php">Home</a></li>
                    <li class="<?php echo $active['about_us.php']?>"><a href="about_us.php">About Us</a></li>
                    <li class="<?php echo $active['cs.php']?>"><a href="cs.php">Consulting and Solutions</a></li>
                    <li class="<?php echo $active['products.php']?>"><a href="products.php">Products</a></li>
                    <li class="<?php echo $active['services.php']?>"><a href="services.php">Services</a></li>
                    <li class="<?php echo $active['contact_us.php']?>"><a href="contact_us.php">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
    Footer
    <div class="navbar navbar-inverse navbar-fixed-bottom " id="footer1" role="navigation">
        <div class="container">
            <div class="row">
                <div class="navbar-header" style="color:#999"> <span class="hidden-840" style="position:relative;top:5px"> Follow Us &nbsp;&nbsp;</span> <a href="http://in.linkedin.com/pub/7concepts-informatics-private-limited/2a/710/439" target="_blank"> <img style="padding-top:6px" src="images/linkedin.png" /> </a> <a href="https://www.facebook.com/pages/7Concepts-Informatics/131225693610585" target="_blank"> <img style="padding-top:6px" src="images/fb.png" /> </a> <a href="https://twitter.com/the7concepts" target="_blank"> <img style="padding-top:6px" src="images/twiiter.png" /> </a> <a href="https://plus.google.com/116053421390242697720/about?hl=en" target="_blank"> <img class="hidden-840" style="padding-top:6px" src="images/google+.png" /> </a> <a href="mailto:sales@the7concepts.in" target="_blank"> <img style="padding-top:6px" src="images/mail.png" /> </a> </div>
                <div class="navbar-collapse navbar-right hidden-840" style="color:#999">
                    <ul class="nav navbar-nav">
                        <li> <a> </a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

Bootstrap 不兼容 IE 版本
嘿伙计们，我找到了解决方案，我不知道它是如何工作的，但是一行代码变得神奇，它现在可以工作了。这是代码：-webkit-backface-visibility:hidden;

标签： css internet-explorer twitter-bootstrap

【解决方案1】：

如果您将“旧 IE”称为 7 或更低版本，我相信这会回答您的问题。考虑到这是 HTML5 中的一个新功能，我并不惊讶旧版浏览器不支持它。

注意：我会发布一张图片，但我缺乏必要的声誉积分。

【讨论】：