顯示：在鍍鉻表單元格的問題

Question

我有3個div的，我想顯示爲表格單元格：

<div class="field"> 
    <div class="row"> 
     <label for="name">Subdomain</label> 
     <input type="text" id="name" name="name"> 
     <div class="subdomain-base ">test</div> 
    </div> 
</div> 

這是我使用的CSS：

body{ 
    font-size: 13px; 
} 

.field { 
    width:450px; 
    display: table; 
} 
.row { 
    display: table-row; 
    width: 100%; 
} 
.row > * { 
    display: table-cell; 
    border: 1px solid red; 
} 
label { 
    width: 125px; 
    height: 18px; 
} 
input { 
    max-width: none; 
    min-width: 0; 
    overflow: auto; 
    height: 18px; 
    width: 100%; 
} 
.subdomain-base { 
    height: 18px; 
    width: 1px; 
} 
.subdomain-base { 
    color: blue; 
    font-size: 13px; 
} 

它的工作原理完美在Firefox 24：

但是，它有在Chrome 30的高度問題（最新）： ​​

我一直在嘗試各種各樣的事情來解決Chrome的問題，但它似乎沒有什麼作品。爲什麼鍍鉻獲得額外的高度？

的jsfiddle：http://jsfiddle.net/ahLMH/

Answer 1

這個問題似乎是由於display: table-cell上input元件是實驗性的。看到這個問題的更多細節：display:table-cell not working on an input element

的解決方案是包裝在span輸入和應用display: table-cell到span並從input刪除overflow: auto。

新的標記看起來像這樣：

<div class="field"> 
    <label for="name">Subdomain</label> 
    <span> 
     <input type="text" id="name" name="name"> 
    </span> 

    <div class="subdomain-base ">test</div> 
</div> 

的CSS現在看起來是這樣的：

body { 
    font-size: 13px; 
} 
.field { 
    width:450px; 
    display: table; 
} 
.field > * { 
    display: table-cell; 
    border: 1px solid red; 
} 
span { 
    padding: 0 5px; 
} 
label { 
    width: 125px; 
} 
input { 
    width: 100%; 
} 
.subdomain-base { 
    width: 1px; 
} 
.subdomain-base { 
    color: blue; 
    font-size: 13px; 
} 

的jsfiddle：http://jsfiddle.net/ahLMH/6/

Answer 2

設置此：

.row > * { 
    display: table-cell; 
    border: 1px solid red; 
    vertical-align: top; // add this 
} 

Updated Fiddle

Answer 3

可悲的是，沒有足夠的代表向Dhaval的答案迴應。

更改爲

vertical-align: middle; 

http://jsfiddle.net/ahLMH/3/