爲什麼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''行爲

回答

相關問題