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 that I am using:
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 perfectly in Firefox 24:
However, it has a height problem in Chrome 30 (latest):
I have been trying all sorts of things to fix the problem with Chrome, but it seems like nothing works. Why is chrome getting that extra height?
Jsfiddle: http://jsfiddle.net/ahLMH/
