导航栏和横幅之间的差距,但不在Firefox

时间:2017-11-21 15:41:20

标签: html css twitter-bootstrap google-chrome microsoft-edge

有人知道为什么我的横幅和导航栏之间存在差距吗?这种差距出现在Edge和Chrome中,但不会出现在Firefox中。

我已经将所有的余量(我能想到的)减少到0.这样就消除了Firefox中的差距,而不是其他浏览器。

我使用Chrome和Edge的开发人员工具来检查差距,它实际上属于.wrapper类。这是.navbar.banner的父亲,所以我无法弄清楚是什么导致其毫无意义的存在!

What it should look like - i.e Firefox

What it looks like in Edge and Chrome

HTML:

{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
        <meta name = "viewport" content="width=device-width", initial-scale=1>

        <link rel="icon" href="favicon.ico">

        <title>{% block title %}MyBlog Title{% endblock title %}</title>
        <link href="{% static 'reset.css' %}" rel="stylesheet">
        <link href="{% static 'myblog.css' %}" rel="stylesheet">
        <link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">

        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700" rel="stylesheet">

        <!-- MyBlog custom styles -->
        <link href="{% static 'myblog.css' %}" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        {% render_block "css" %}
    </head>
    <body>
        <div class="wrapper">
            <!--<div class="blog-header"></div>-->
            <div class ="banner">
                <h1 id="logo">Patch's Soapbox </h1>
                <!--<img class = "blog-header" src="../../media/images/banner.png">-->
            </div>
            {% cms_toolbar %}
            <nav class="navbar navbar-default navbar-static-top">
                <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>
                        <!--<a href=""><img src="{% static '#' %}"/></a>-->
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            {% show_menu 0 1 0 100 "menu.html" %}
                        </ul>
                    </div>
                </div>
            </nav>

            <div class="container-full">
                {% block content %}{% endblock content %}
            </div>

            <div class="push"></div>
        </div>  
        <footer class="footer">
         <div class="container-full">
          <p class="text-muted">{% block footer %}Patch The Bill&copy; 2015{%endblock footer%}</p>
         </div>
        </footer>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
        <script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>

        {% render_block "js" %}
    </body>
</html>

CSS:

html {
    position : relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    /* Margin bottom by footer height */
    /*margin-bottom: 60px;*/
    font-family : Georgia, "Times New Roman", Times, serif;
    color: #555;
    width: 100%;
    height: 100%;
    min-height:100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    min-height:100%;
    margin-bottom:-60px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
    font-weight: normal;
    color: #333;
}
.footer,.push {
    height:50px;
}
.footer {
    position: absolute;
    clear:both;
    padding-bottom:0;
    padding-left : 0px;
    bottom: 0;
    width: 100%;
    min-height: 60px;
    height:100%;
    background-color: #f5f5f5;
}
footer.footer {
  position: relative;
  bottom: 0;
  width: 100%;
 }
.blog-header {
    display: block;
    width: 100%;
    border-style: solid;
    /*border-bottom: solid #C6C6C6*/
}
.container-full {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.blog-title {
    margin-top: 0px;
    width: 500px;
    margin-bottom: 0;
    font-size: 28px;
    font-weight: normal;
}
.blog-description{
    font-size: 20px;
    color: #999;
}
.sidebar-module{
    padding: 15px;
    margin: 0 -15px 15px;
}
.sidebar-module-inset {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
    margin-bottom: 0;
}
.pager {
    margin-bottom: 60px;
    text-align: left;
}
.pager > li > a {
    width: 140px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 30px;
}
.blog-post{
    margin-bottom: 60px;
}
.blog-post-title{
    margin-bottom: 5px;
    font-size: 40px;
}
.blog-post-meta {
    margin-bottom: 20px;
    color : #999;
}
body > container {
    padding: 0px 0px 0;
}
.container .text-muted {
    margin: 0 0;
}
.footer > .container {
    padding-right: 15px;
    padding-left: 0;
    bottom:0;
}
.row {
    margin-right: 0px!important;
}
.navbar { margin-bottom: 0;
        margin-top: 0;
        padding-top:0
}
.footer { margin-bottom: 0;}
.banner {background-color: green;
        min-height: 120px;
        padding-bottom:0
}
#logo {
    position: relative;
    bottom: -50px;
    text-align:right;
    color:white;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 50px
}

1 个答案:

答案 0 :(得分:0)

使用-webkit-padding-before进行顶部填充,-webkit-padding-after进行底部填充。

(上) - -webkit-padding-before

(右 - -webkit-padding-end

(下) - -webkit-padding-after

(左) - -webkit-padding-start

查看有关浏览器特定黑客的文档

https://css-tricks.com/snippets/css/browser-specific-hacks/

或者也许可以尝试这种媒体查询:

  Imports Itenso.Rtf.Converter.Html
  Imports Itenso.Rtf.Support
  Imports Itenso.Rtf

   Dim rr As String = bodytxt.Rtf.Replace("\0", "")
    Dim rtfDocument As IRtfDocument = RtfInterpreterTool.BuildDoc(rr)
    Dim htmlConverter As New RtfHtmlConverter(rtfDocument)
    Dim html1 As String = htmlConverter.Convert()

    ' my other codes in-between(read my post)

     oMail.HtmlBody = html1
相关问题