我有 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/
最佳答案
设置这个:
.row > * {
display: table-cell;
border: 1px solid red;
vertical-align: top; // add this
}
关于css - 显示 : table-cell problems in chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19614408/