導航欄中的搜索欄在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中看起來不一樣

回答

相關問題