css - 显示：chrome 中的表格单元格问题

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 的问题，但似乎没有任何效果。为什么 chrome 会变得那么高？

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

Answer 1

设置这个：

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

更新小提琴

Answer 2

问题似乎是由于display: table-cell元素input是实验性的。有关更多详细信息，请参阅此问题：display:table-cell not working on an input element

解决方案是将输入包装在 a 中并span应用于display: table-cell并span从overflow: auto.input

新标记如下所示：

<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 3

可悲的是，没有足够的代表来回应 Dhaval 的回答。

改成

vertical-align: middle;

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