为什么doctype更改'display：table-cell''行为

我已经用输入做了一个表单。这些输入的宽度是100％，75％，50％和25％，我应该能够将它们组合成一排（所以50/50，25/25/25/25）。为什么doctype更改'display：table-cell''行为

这些输入不能有固定大小，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>时，填充使输入溢出跨度。没有文档=没有问题，但我想继续使用它。

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

正如你所看到的，有投入之间没有间隙，以及输入溢出的形式。这是因为jsFiddle也使用文档类型

任何人都有一些想法？

例（我想 '没有DOCTYPE' 看起来在 '与文档类型' 页面，必须是跨浏览器）：
example image of problem http://api.lab35.nl/doctype-problem.jpg。

来源

2013-07-26 Martijn

只是问，你是否使用标签？（只是想明白为什么你的目标只有输入框没有标签） – KarelG

我不会去标签，因为在这种情况下，我们使用占位符属性，添加标签将是双重的。如果让输入工作（而不是'span'包裹'input'，它将包裹''标签'），那么添加标签应该可以工作。 – Martijn

两个问题在这里：

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

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

你需要这个的原因是因为跨度设置为百分比宽度，你想要加起来高达100％。但在标准模式下的默认行为中，边框，填充和边距会被添加到框外，所以50％的宽度实际上会变为50％以上，并且边框的额外5px等等。这就是为什么它会溢出边缘。

的border-box设置切换它变成非常相似的作品如何怪癖模式工作模式，即边界等放在内箱子，所以，如果你问一个50％的宽框，这将是50 ％宽，即使它有边框或填充。
第二点是display:table和display:table-cell并不总是按预期方式工作，除非您在它们之间还有另一层标记设置为display:table-row。所以如果你想继续使用表格布局样式，你应该添加这个。

但是你的布局并不真正适合表格格式;这是应该使用float:left的最佳示例。我通常不是花车爱好者，但是这是一个我会说要使用它的情况，因为它几乎是他们发明它们时想到的用例。

考虑到这些点，我已经完全重写使用花车和箱尺寸您的jsfiddle代码，制作了你的CSS代码，看起来酷似你的预期效果，没有任何更改HTML标记。

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

希望有所帮助。

来源

2013-07-26 11:04:31 Spudley

这是完美的谢谢。我做了这个解决方案，因为你解释了边界框是如何工作的（从来不知道它改变了框模型）。另外，'span + span'，我喜欢它。我有点困惑，为什么我从来不知道这一个，但这是在很多方面完美。干杯 – Martijn

如果您使用框尺寸：border-box;为您的输入，你可以有宽度：100％和填充：10px;

好了，在这里你去：http://jsfiddle.net/cmex/35SSR/4/

我添加-moz-和-webkit-属性，以便它现在可以在Chrome 28，Firefox的22，IE（8-10），Safari浏览器5.1.7（赢）

如果需要支持早期版本的IE浏览器，你可以用https://github.com/Schepp/box-sizing-polyfill 支持盒大小

来源

2013-07-26 09:30:50

没有什么区别。如果你可以将它添加到我的jsFiddle，以防万一我做错了 – Martijn

http://jsfiddle.net/35SSR/1/ –

不知道它显示了什么，但这不是我所期待的结果。输入在一起应该使100％，请所以我添加的图像作为例子 – Martijn

有时我正在使用表格解决这个的。风格比较容易。

在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%; 
}

需要

。那么你可以在一个fieldset框中获得全部内容。 See example here

来源

2013-07-26 09:57:40 KarelG

是的，但我试图不使用表格。我们也有1/3和2/3选项，这对于集体来说确实很渺茫。真的不想这样做 – Martijn

为什么doctype更改'display：table-cell''行为

回答

相关问题