Firefox 和 Explorer 的 css 和 Bootstrap 错误

Question

我有这个使用 bootstrap 的网站。它是使用Chrome开发的用于测试(我的疏忽)我不明白为什么在 firefox 中，即这非常糟糕!有人可以给我一些指导，说明我必须更改我的 CSS 以使网站与所有浏览器兼容吗？

例如:

• 顶部的菜单是不可见的(没有背景图片)并且不是固定的
• 像“Presentazioni”这样的标题不在页面中间

• “Presentazioni”和“La Famiglia”段落中的图像太大 --> 解决了放置而不是

   <img src="..." width="100px;">
   <img src="..." style="width: 100px;">
  

• 所有文字都不在页面中间

• 底部的菜单完全不同

有什么工具可以用来查找与 firefox 和 ie 不兼容的 css 属性吗？

Answer 1

您的主要问题出在您的 themes/css/style.css 文件中。第 23 行:

h1{padding: 0 0 44px; font-weight: 200;font-size: 64px;line-height: 56px;color: #464646;margin: 0;font-family: 'font-family: 'Special Elite';text-rendering: optimizelegibility; text-transform: uppercase;}

font-family 重复两次，在第二个 font-family 之前有一个单引号，这是对整个代码的注释。更正它，让我们看看会发生什么，我不能尝试。

无论如何，你应该用这个替换你的导航栏代码:

<div class="navbar navbar-fixed-top" id="headerSection">
    <div class="navbar-inner" style="background: url(imm/parquet.jpg);background-color: grey; background-repeat: no-repeat; border-bottom: 1px solid #dedede; padding: 8px 0 0;">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- h1 class="brand cntr">TEVAD</h1-->
            <div class="nav-collapse collapse" style="height: 0px;">
                <ul class="nav">
                    <li class="active"><a href="#Home">Home</a></li>
                    <li><a href="#ChiSono">Presentazioni</a></li>
                    <li><a href="#Prodotti">La Famiglia</a></li>
                    <li><a href="#carouselSection">Gallery</a></li>
                    <li><a href="#VideoGallery">Video</a></li>
                    <li><a href="#Contatti">Contatti</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

尝试删除内联样式并在 css 文件中定义它们。不要修复 css 文件中的导航栏，而是使用 .navbar-fixed-top 类。阅读 Bootstrap 文档，您没有使用正确的结构或正确的类:Bootstrap navbar .