fieldset firefox overflow CSS修復

如何設置內容溢出fieldset？它適用於IE，但不適用於FF。fieldset firefox overflow CSS修復

我可以在兩個瀏覽器中使用div元素實現相同的功能。

樣品：

<fieldset style="border:thin solid #990033;"> 
    <legend>test</legend> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</fieldset> 
<p>&nbsp;</p> 
<div style="border:1px solid #999999; padding:0 8px 8px 8px;"> 
    <label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</div>

來源

2009-11-04 jmav

我粘貼到這個HTML文檔和兩個框在Firefox（3.5）看上去是一樣的。在Internet Explorer中他們有不同的內部填充。一個簡單的CSS技巧就是在沒有填充和無邊距的情況下啓動所有功能： * {padding：0;保證金：0} 只需應用您需要的，每個瀏覽器都會在元素上放置不同的默認填充和邊距。 – MalphasWats

找到解決方案，添加條件CSS樣式：

fieldset { 
    display: table-column; 
} 
<!–[if IE]> 
fieldset { 
    display: block; 
} 
<![endif]–>

來源

2009-11-05 13:04:49 jmav

完美！謝謝！請注意，您不能浮動字段集。我還用Opera支持做了一個演示小提琴：http://jsfiddle.net/dsHUW/5/ – falsarella

謝謝！剛剛確認：此錯誤在FF 20.0.1中仍存在，並且也存在於Safari 5.1.2中。在Chrome和IE 7-10中運行良好。 'display：table-column;'固定它爲Firefox，但不是Safari。 IE根本不會渲染字段集（必須使用'display：block'，而不是默認值）。 Chrome似乎不在乎它是「block」還是「table-column」，無論哪種方式呈現都很好。 [查看小提琴]（http://jsfiddle.net/VVjnr/）（在Windows 7 SP1中完成所有測試） – nothingisnecessary

'display：table-column;'不能解決Chrome 36中的問題 –

-1

你不需要溢出內容！在IE（6）中，默認情況下，「fieldset」標記沒有填充，在FF中有！這就是爲什麼你有不同的行爲！

您可以重置字段集的填充（padding：0px;），但在這種情況下，在FF中，標籤看起來不太好！要解決這個問題，您可以重置字段集的填充底部，並將「margin-left：-12px」應用於字段集內的div。但是，這解決了FF的問題，但在IE中產生問題！

所以，我的建議是使用條件CSS語句來適用於每個瀏覽器正確的樣式規則！

來源

2009-11-04 14:10:57 BitDrink

我嘗試過，但沒有成功。 – jmav

這實際上是在Firefox中的錯誤和它存在了近8年。：d https://bugzilla.mozilla.org/show_bug.cgi?id=261037

來源

2012-07-17 06:02:27 Jerome

此錯誤仍存在於FireFox 32和Chrome 36. –

這是一個錯誤嗎？無論如何，它仍然存在於FF v54.0.1中 - 只需使用'fieldset {display：table-column;}'修復程序就可以了！ – B4NZ41

@ B4NZ41在FF 52.5.3 ESR中，fieldset {display：table-column;}不能解決溢出和寬度問題，不能用於固定/絕對定位元素（自動轉換爲display：block，但看起來像display：表）。我嘗試過但不起作用。壞消息：Chrome已經「改善」了字段集，像firefox一樣工作。這是可悲的。 – 18C

從博客post由埃米爾比約克倫：

body:not(:-moz-handler-blocked) fieldset { 
    display: table-cell; 
}

來源

2015-04-17 09:28:36 Gebb

1000X是的，謝謝你。這應該是可以接受的答案，另外一個除了考慮之外不會採用任何其他瀏覽器。 – Bryan

在Firefox和Chrome中不適用於我。 – 18C

fieldset firefox overflow CSS修復

回答

相關問題