Question

我已经制作了一个有输入的表格。这些输入的宽度分别为100％，75％，50％和25％，我应该可以将它们组合成一行（所以50 / 50,25 / 25/25/25）。

这些输入不能有固定的大小，包装形式的div可以是任何宽度。问题是有边框和填充以像素为单位而CSS不允许width: 100%-10px;。

我发现的解决方案是将display: table-cell添加到包装中，并将div包装为display: table。小例子：

<div>
    <span class="Half"><input class="" value="Half"/></span>
    <span class="Half"><input class="" value="Half"/></span>
</div>

用我的css完成。完美。如果我在输入中添加填充，则填充只会使宽度变小。

问题：当我添加<!DOCTYPE html>时，填充使输入溢出跨度。没有doctype =没问题，但我想继续使用它。

我做了一个例子： http://jsfiddle.net/35SSR/

正如您所看到的，输入之间没有间隙，输入溢出了表单。这是因为jsFiddle也使用了doctype

有人有想法吗？

示例（我希望“带doctype”页面中的“无doctype”外观，必须是crossbrowser）：
example image of problem http://api.lab35.nl/doctype-problem.jpg

Answer 1

这里有两个问题：

为了在标准模式下模拟怪癖模式（即没有doctype的模式），您需要包含box-sizing:border-box样式。注意，如果要支持Firefox，还需要带前缀的版本（-moz-box-sizing）。较旧的webkit浏览器可能还需要一个前缀。

您可以将其应用于全局选择器，以便它影响所有元素或仅影响span元素（因为那些是需要它的元素）。

您需要这个的原因是因为跨度设置为百分比宽度，您想要加起来达到100％。但是在标准模式下的默认行为中，边框，填充和边距是在框外添加的，因此您的50％宽度实际上变为50％加上边框的额外5px等。这就是它从侧面溢出的原因。

border-box设置将其切换为与quirks模式工作方式非常相似的模式，即边框等将放在框内，这样如果你要求50 ％宽的盒子，即使有边框或填充物也会有50％的宽度。
第二点是，display:table和display:table-cell并不总是按预期工作，除非您还将另一层标记设置为display:table-row。因此，如果您想继续使用表格布局样式，则应添加此内容。

然而，无论如何，你的布局并不适合表格格式;这是应该使用float:left的完美示例。我通常不喜欢花车，但这是我要说使用它的一个例子，因为它几乎就是他们发明它们时想到的用例。

考虑到这些要点，我已经使用浮点数和大小调整完全重写了你的jsFiddle代码，并为你生成了看起来与预期效果完全相同的CSS代码，而不对HTML标记进行任何更改。

这是更新的小提琴：http://jsfiddle.net/35SSR/5/

希望有所帮助。

Answer 2

如果您为输入使用 box-sizing：border-box; ，则可以使用宽度：100％和填充：10px;

好的，你走了：http://jsfiddle.net/cmex/35SSR/4/

我添加了-moz-和-webkit-属性，因此它现在可用于Chrome 28，Firefox 22，IE（8-10），Safari 5.1.7（Win）

如果您需要支持早期版本的IE，可以使用https://github.com/Schepp/box-sizing-polyfill 支持盒子大小调整

Answer 3

有时我通过使用表来解决这个问题。风格更容易。

HTML中的

，

<fieldset>
    <table>
        <tr>
            <td colspan="4"><input class="Full" value="Full"/></td>
        </tr>
        <tr>
            <td colspan="2"><input class="Half" value="Half"/></td>
            <td colspan="2"><input class="Half" value="Half"/></td>
        </tr>
        <tr>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
        </tr>
        <tr>
            <td><input class="Quarter" value="Quarter"/></td>
            <td colspan="3"><input class="ThreeQuarter" value="ThreeQuarter"/></td>
        </tr>
        <tr>
            <td colspan="3"><input class="ThreeQuarter" value="ThreeQuarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
        </tr>
    </table>
</fieldset>

然后在css中，只是一个简单的

table {
    width: 500px;
}
input {
    width: 100%;
}

必需的。然后你得到一个字段集框。 See example here

为什么doctype会改变'display：table-cell''的行为

3 个答案: