谷歌瀏覽器 - 字段集溢出錯誤

Question

谷歌瀏覽器似乎有一個錯誤，當一個字段集中的內容溢出。

下面是一個說明該問題的的jsfiddle：http://jsfiddle.net/Dismissile/Lnm42/

如果你看一下頁面，你會看到，當你有一個容器，一個字段內，並且該容器具有overflow: auto集，該容器具有以水平溢出內容，字段集實際上擴展，而不是使用滾動條：

<fieldset class="parent"> 
    <div class="child"> 
     <div class="grandchild"> 
      asdf 
     </div> 
    </div> 
</fieldset> 

<div class="parent"> 
    <div class="child"> 
     <div class="grandchild"> 
      asdf 
     </div> 
    </div> 
</div> 

CSS：

.parent { 
    border: 1px solid green; 
    padding: 20px; 
    margin: 20px; 
} 

.child { 
    border: 1px solid red; 
    padding: 20px; 
    overflow: auto; 
} 

.grandchild { 
    border: 1px solid #ccc; 
    width: 2000px; 
    padding: 10px; 
} 

有沒有CSS黑客/修補程序我可以使用，以便內容在Chrome中的字段集內正常溢出？

Answer 1

使用JavaScript來設定視口的寬度：

• http://jsfiddle.net/Lnm42/2/

我添加了一個名爲fieldset-width到字段集類：

<fieldset class="parent fieldset-width">

然後加入這個JQuery代碼：

$(document).ready(function() { 
    $(".fieldset-width").css("width", $(window).width() - 82); 
}); 

$(window).resize(function() { 
    $(".fieldset-width").css("width", $(window).width() - 82); 
}); 

我唯一的評論是，我想不出一個很好的理由來干擾默認的fieldset功能。我不喜歡「滾動條內的滾動條」開始。對於輸入字段（通常包含哪些字段集），我會特別小心地讓用戶滾動以獲取所有輸入字段。

Answer 2

使用僞字段集（又名<div class="fieldset"></div>）我相信你可以接近。見jsfiddle。

試試這個造型：

fieldset,.fieldset { 
    margin: 10px; 
    border: solid 1px black; 
    position: relative; 
    padding: .5em; 
} 

.legend { 
    left: 0.5em; 
    top: -0.6em; 
    color: black; 
    position: absolute; 
    background-color: white; 
    padding: 0 0.25em 0 0.25em; 
} 

這是不太理想的字段集造型需要複製，但對我來說這是唯一的容忍解決我的磨合這個問題，我已經能夠想出來。如上所述，您可能可以將現有的字段集樣式應用於僞字段。

Answer 3

UPDATE：

正如最近Chrome瀏覽器微軟Windows更新（V28也許還沒有跟蹤它了嗎？），auto不再是min-width一個有效的價值，而這個解決方案不再作品！

新的解決方案：

使用inherit而不是auto似乎解決這個問題迄今我已經測試的所有情況。 （包括原裝小提琴..詳見the new fiddle fix。）

更新修復：FIELDSET {min-width: inherit; }

原來的答覆：

鉻定義fieldset的默認用戶代理樣式：min-width: -webkit-min-content。

因此，當您的可視區域（又稱「屏幕」）小於具有特定寬度的div時，-webkit-min-content會增大字段集以適應內容大小（加上填充等）。

的修復：FIELDSET { min-width: auto; }

我定你的小提琴，try it out！

Answer 4

您可以添加style =「display：table-column;」作爲解決方案的字段集。

Answer 5

嘗試：

fieldset { 
    display: table-cell; 
    min-width: 0; 
    box-sizing: border-box; 
} 

這是解決您的例子：http://jsfiddle.net/2u3a9goc/