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

我对导航栏中的搜索栏有以下代码。它在Firefox中看起来不错，但在Google Chrome浏览器上，搜索栏延伸到低于导航。我该如何解决？导航栏中的搜索栏在Google Chrome和Firefox中看起来不一样

<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>

来源

2014-02-18 Paul

元素寻找在其他浏览器不同的通常往往涉及一个样式表，所以一些CSS将是不错:) – Marcel

你可以阅读更多关于跨浏览器呈现问题[这里]（http://stackoverflow.com/questions/3050443/what-is-cross-browser-rendering） – lozadaOmr

我使用的CSS是bootstrap.css ..我没有任何覆盖在他们的风格..这就是为什么我想知道他们为什么在不同的浏览器上显示不同。 – Paul

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

来源

2014-06-24 12:34:45 user3771202

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

回答

相关问题