css - Chrome 中导航栏的错误(UI-Bootstrap)

Question

我使用 anglular 和 bootstrap 创建我的平台。在上面的隐私指令 ui.bootstrap.tabs 中。一切都很好，但 chrome 中有一个小错误，显示内联导航选项卡。接下来是导航栏的 DOM

 <div class="landing-navbar hidden-sm hidden-xs">
    <div class="container">
        <div ng-controller="LandingNavbarCtrl">
            <div class="navbar-home-ico col-md-1 col-sm-2 col-xs-5">
                <i class="fa fa-home inline cursor" aria-hidden="true"></i>
                <i class="fa fa-bars inline hidden-md hidden-lg" aria-hidden="true"></i>
            </div>
            <div class="col-md-10 hidden-sm hidden-xs">
                <div class="col-md-9 middle-tabs">
                    <uib-tabset active="activeJustified" justified="true">
                    <uib-tab index="0" heading="Home" template-url="views/templates/tabTemplate.html"></uib-tab>
                    <uib-tab index="1" heading="Solution" template-url="views/templates/tabTemplate.html"></uib-tab>
                    <uib-tab index="2" heading="Projects" template-url="views/templates/tabTemplate.html"></uib-tab>
                    <uib-tab index="3" heading="Blog" template-url="views/templates/tabTemplate.html"></uib-tab>
                    <uib-tab index="4" heading="Services" template-url="views/templates/tabTemplate.html"></uib-tab>
                    <uib-tab index="5" heading="Shop" template-url="views/templates/tabTemplate.html"></uib-tab>
                    <uib-tab index="6" heading="About" template-url="views/templates/tabTemplate.html"></uib-tab>
                    <uib-tab index="7" heading="Contact" template-url="views/templates/tabTemplate.html"></uib-tab>
                    </uib-tabset>
                </div>
                <div class="col-md-2 col-md-offset-1 col-xs-12 right-tabs">
                    <div class="pull-right">
                        <uib-tabset active="activeJustified" justified="true">
                            <uib-tab index="8" heading="fa fa-twitter" template-url="views/templates/socialTabsTemplate.html"></uib-tab>
                            <uib-tab index="9" heading="fa fa-facebook" template-url="views/templates/socialTabsTemplate.html"></uib-tab>
                            <uib-tab index="10" heading="fa fa-gitlab" template-url="views/templates/socialTabsTemplate.html"></uib-tab>
                            <uib-tab index="11" heading="fa fa-vk" template-url="views/templates/socialTabsTemplate.html"></uib-tab>
                        </uib-tabset>
                    </div>
                </div>
            </div>
            <div class="navbar-search-ico col-md-1 col-xs-6 col-xs-offset-1 col-sm-offset-4 col-md-offset-0">
                <i class="fa fa-search pointer" aria-hidden="true" ng-click="setVisibility()"></i>
                <span class="search-input"><input placeholder="Enter your search term..." ng-class="class" /></span>
            </div>
        </div>
    </div>
</div>

当我将浏览器的大小调整为 sm-screen 大小，然后将其设置回正常大小 (lg) 它开始看起来不错。

在 chrome 中打开时

在其他浏览器(firefox、IE)中打开或在 chrome 中调整大小后:

请帮忙。谢谢。

Answer 1

如果我们看this fiddle我们看到一切都在这种情况下，所以你应该提供你的 CSS。但我过于自信问题出在:

.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
}