CSS行內(inline)元素同行放置時,垂直對齊差異

以下代碼在不同瀏覽器中呈現不同樣式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		.logo{display:block;width:54px;height:153px;background:url(http://ww1.sinaimg.cn/square/76591c14gw1e2p567sqqaj.jpg);float:left;}
		.input{display:block;height:150px;float:left;}
		.btn{display:block;height:150px; float:left;}
		.tips{display:block;height:150px;background:#cccccc;float:left;}
	</style>
</head>
<body>
    <div class="row"> 
	 <span  class="logo"></span> 
	 <input class="input" value="測試數據" /><button class="btn">確定</button><span class="tips">提示內容</span>  
	 </div>
   </body>
</html>
解決辦法:全部加上float:left,顯出垂直對齊差異,目前只想到這種辦法,各位如有高見,還望指正。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章