导航栏中的搜索栏在 Google Chrome 和 Firefox 中看起来不一样答案

【问题标题】：Search bar in navbar doesn't look the same in Google Chrome and Firefox导航栏中的搜索栏在 Google Chrome 和 Firefox 中看起来不一样
【发布时间】：2014-06-24 20:57:01
【问题描述】：

我在导航栏中的搜索栏有以下代码。它在 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>

【问题讨论】：

在其他浏览器中看起来不同的元素通常会涉及样式表，所以一些 CSS 会很好:)
你可以阅读更多关于跨浏览器渲染问题here
我使用的 CSS 是 bootstrap.css。我没有对它们的样式进行任何覆盖。这就是为什么我想知道为什么它们在不同的浏览器上显示不同。

标签： javascript css google-chrome twitter-bootstrap navbar

【解决方案1】：

我在 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; }

见https://github.com/twbs/bootstrap/issues/9950

【讨论】：