显示：chrome中的表格单元格问题 [英] Display: table-cell problems in chrome

问题描述

我有3个div，我想显示为表格单元格：

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>

这是我使用的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中可以正常工作：

It works perfectly in Firefox 24:

但是，Chrome 30中存在高度问题（最新）：

However, it has a height problem in Chrome 30 (latest):

我一直在尝试各种各样的东西来解决Chrome的问题，但似乎没有什么工作。为什么chrome会获得额外的高度？

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/

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

推荐答案

问题似乎是由于 display：table-cell 在输入元素是实验性的。有关详情，请参阅此问题： display：table-cell not working on输入元素

The problem appears to be due to display: table-cell on input elements being experimental. See this question for more details: display:table-cell not working on an input element

解决方案是将输入包裹在 span 中并应用 display：table-cell 到 span 并删除 overflow：auto 输入。

The solution is to wrap the input in a span and apply display: table-cell to the span and to remove overflow: auto from the 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现在如下所示：

The css now looks like this:

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/

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

这篇关于显示：chrome中的表格单元格问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！