Chrome瀏覽器下的CSS問題（文本框和按鈕）

我在Chrome瀏覽器中無法正確顯示的文本框和按鈕的位置存在問題。Chrome瀏覽器下的CSS問題（文本框和按鈕）

下面是來自每個瀏覽器的示例，您可以看到Chrome下的文本框被推出了位置。

的Internet Explorer/Firefox的

鉻

HTML：

<div id="divSearch"> 
    <input type="text" id="txtSearch" placeholder=" Search..."/> 
    <input type="submit" id="btnSearch" value=""/> 
</div>`

CSS：

input[type=text]{ 
    width: 200px; 
    height: 24px; 
    border: none; 
    border-radius: 3px 0px 0px 3px; 
    -webkit-border-radius: 3px 0px 0px 3px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    padding: 0; 
} 

input[type="submit"]{ 
    border: none; 
    border-radius: 0px 3px 3px 0px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -webkit-border-radius: 0px 3px 3px 0px; 
    width: 32px; 
    height: 24px; 
    background: url(../img/search_button.png) no-repeat; 
    background-color: white; 
    background-position: 10px 5px; 
} 

#divSearch{ 
float: right; 
width: 300px; 
height: 40px; 
white-space: nowrap; 
margin-right: 50px; 
}

現在，如果我從input[type="submit"]刪除高度的位置是正常的，除了按鈕現在是錯誤的大小。

我想不通，爲什麼按鈕的高度引起的問題。有關如何解決它的任何建議？

謝謝

來源

2016-04-15 user2168287

[HTML輸入按鈕css-height在Safari和Chrome上無法正常工作]的可能副本（http://stackoverflow.com/questions/12450776/html-input-button-css-height-not-working-on-safari - 鉻） –

添加下面的代碼。它應該工作：

input[type=text]{ 
    float:left 
} 
input[type=text]{ 
    float:left 
}

來源

2016-04-15 05:59:35

完美的工作，這樣一個簡單的修復，謝謝。你知道爲什麼浮球離開了嗎？ – user2168287

浮動規則說，如果你浮動一個元素，那麼每一個元素都應該浮動。你只在#divSearch中使用流而不是輸入元素。無論如何，這是使用float解決問題的一個竅門。 –

使按鈕值非空將解決此問題。

<input type="submit" id="btnSearch" value="&nbsp;"/>

根本原因是按鈕沒有文本基線。

來源

2016-04-15 13:00:23

Chrome瀏覽器下的CSS問題（文本框和按鈕）

回答

相關問題