CSS DIV默認寬度在IE中看起來不錯。 不是Firefox

Question

我已經在這里建立了一個示例： http : //studiozion.com/cssproblem/fix_it.htm 。

相關代碼塊...

 <style type="text/css"> body { background: transparent url(Grade300_Color1.png) repeat-x } .RowMaker { overflow: auto; } .ColumnMaker { float: left; } .ColumnMaker2 { float: right; } .PadTop { padding-top: 10px; } .PadBot { padding-bottom: 10px; } .PadLeft { padding-left: 15px; } .PadRight { padding-right: 15px; } .ControlCurve1 { height: 6px; background: transparent url(ControlCurve1.png) no-repeat right -6px } .ControlCurveRight1 { height: 6px; width: 6px; background: transparent url(ControlCurve1.png) no-repeat top left } .ControlCurveLeft1 { height: 6px; width: 6px; background: transparent url(ControlCurve1.png) no-repeat bottom left } </style> 

 <div class="RowMaker"> <div class="ColumnMaker ControlCurveLeft1"><span></span></div> <div class="ColumnMaker ControlCurve1"> <div class="RowMaker"> <div class="ColumnMaker2 ControlCurveRight1"><span></span></div> </div> </div> </div> 

因此，問題是IE中的類為“ ColumnMaker ControlCurve1”的div將擴展為填充類為“ RowMaker”的父容器的寬度，從而為div創建一個漂亮的小斜角帽。 但是在Firefox中，“ ColumnMaker ControlCurve1” div會被截斷，導致斜角帽的右側向左對齊。

那么誰是對的？ 更重要的是，如何在保留擴展到其父容器的可視元素的靈活性的同時解決此問題？ 我真的不想在“ ColumnMaker Control1”上設置硬寬度。

Answer 1

Firefox永遠是正確的選擇（j / k）

這個問題以前已經解決了很多次。 我可以建議您快速搜索一下，例如

http://redmelon.net/tstme/4corners/

http://kalsey.com/blog/2003/07/rounded_corners_in_css/

還有一個jQuery的解決方案

http://www.malsup.com/jquery/corner/

Answer 2

您需要清除浮標。 在樣式表中，為容器中包含浮點的代碼添加以下代碼：

#yourContainer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

您還可以（並且也應該）通過放置min-height: 10px;清除IE的浮動信息min-height: 10px; 在您的#yourContainer樣式定義中。

也有可能因為您沒有內容且沒有設置寬度，所以div不會延伸到任何東西。

只是一些想法，而沒有真正測試。