I have three different divisions that I would like to showcase 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>
Here is the specific CSS that I am implementing:
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;
}
This setup functions flawlessly in Firefox version 24:
However, there appears to be a height discrepancy issue with Chrome version 30 (the most recent update):
I've tried numerous approaches to rectify the problem in Chrome, but it seems like nothing is effective. Why exactly is Chrome exhibiting this additional height?
Jsfiddle: http://jsfiddle.net/ahLMH/