css按鈕位置在所有瀏覽器中都不起作用

Question

我使用登錄功能編寫了一個新網站，但登錄按鈕在各種瀏覽器中都很怪異。這裏是我的意思是：

正常狀態 - 火狐：

Safari瀏覽器：

鉻：

這裏是表單代碼：

.log_in { 
    position: absolute; 
    right: 20px; 
    overflow: hidden; 
    margin-top: 25px; 
} 
.log_in { 
    display: inline-block; 
} 
.log_in input[type="button"] { 
    background-color: #03586a; 
    height: 26px; 
    border: none; 
    color: #fff; 
    float: right; 
    width: 70px; 
    line-height:normal !important; 
    margin-left: 4px; 
} 
.log_in input[type="button"]:hover { 
    background-color: #4c829c; 
} 
.log_in input[type="text"], .log_in input[type="password"] { 
    width: 130px; 
    background-color: #fff; 
    border: 1px solid #a1b5c4; 
    line-height:normal !important; 
    padding: 5px 10px; 
    font-size: 12px; 
    color: #327d89; 
} 
.log_in input[type="text"]:hover, .log_in input[type="password"]:hover { 
    background-color: #cfd8e0; 
} 
.log_in input[type="text"]:focus, .log_in input[type="password"]:focus { 
    background-color: #cfd8e0; 
} 

我怎樣才能解決這個問題，以使它看起來像火狐在所有瀏覽器？

JSFiddle

Answer 1

刪除按鈕的浮動，和所有的輸入是inline-block的

.login input{ 
    display: inline-block; 
} 

DEMO

Answer 2

你可以改變這個CSS

.log_in input[type="button"] 
{ 
    background-color: #03586a; 
    height: 26px; 
    border: none; 
    color: #fff; 
    width: 70px; 
    line-height:normal !important; 
} 

您的按鈕將顯示在正確的地方。我檢查了鉻，但我希望我會在所有主流瀏覽器中工作。