Display: problems with cells in chrome

Question

I have 3 divs that I would like to display as table cells:

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

This is the CSS I use:

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;
}

It works fine in Firefox 24:

However, Chrome 30 has a height issue:

I am trying to solve all problems with Chrome, but nothing seems to work. Why does chrome get extra height?

Jsfiddle: http://jsfiddle.net/ahLMH/

Answer 1

The problem appears to be related to the fact that the elements display: table-cellto inputbe experimental. See this question for more information: display: table-cell does not work on input element

, 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 2

:

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

Fiddle

Answer 3

Unfortunately, there are not enough answers to answer the answer of Dhaval.

Change to

vertical-align: middle;

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