Javascript 导航栏中的搜索栏不'；Google Chrome和Firefox看起来不一样

在导航栏中，我的搜索栏有以下代码。它在Firefox中看起来不错，但在Google Chrome上，搜索栏会延伸到导航下方。我该如何解决这个问题

    <div class = "navbar navbar-inverse navbar-fixed-top">
        <div class = "navbar-inner">
            <div class = "container">
                <a href = "#" class = "navbar-brand">SIG Inventory System</a>
                <div class="navbar-header">
                    <button type='button' class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                </div>
                <div class = "collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav ">
                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">About</a></li>
                    </ul>

                    <form class="navbar-form navbar-right" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm " placeholder="Search..." name="srch-term" id="srch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>
                    </form>

                    <!--<form class="nav navbar-form navbar-right" role="search">
                      <div class="form-group ">
                        <input class="form-control input-sm " placeholder="Search..." type="text">
                      </div>
                      <button type="submit" class="btn btn-danger btn-sm">
                        <span class="fa fa-search"></span>
                      </button>
                    </form>-->
                </div>
            </div>
        </div>
    </div>

我在bootstrap 3中遇到了同样的问题，标记非常相似。尝试将此添加到覆盖

CSS

，它将修复最终问题，但不幸的是无法解决实际问题。我还没走那么远

nav .navbar-form {max-width: 300px}

编辑

显然，这是一个更优雅的修复

.navbar-form .input-group-btn,
.navbar-form .input-group-addon {
    width: auto;
}

然而，我决定：

.navbar-form .input-group-btn,
.navbar-form input { width: auto; }

---

请参见

在其他浏览器中看起来不同的元素通常会涉及样式表，因此一些CSS会很好：）您可以阅读更多关于跨浏览器呈现问题的内容我使用的CSS是bootstrap.CSS。。我对他们的风格没有任何改变。。这就是为什么我想知道为什么它们在不同的浏览器上显示不同。