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>

所以问题是带有“ColumnMaker ControlCurve1”类的div将扩展为在IE中使用类“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

你需要清理浮子。在样式表中，包含以下代码，其中包含浮动的 CONTAINER ：

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

您还可以（并且还应该）通过将min-height: 10px;添加到#yourContainer样式定义中来清除IE的浮点数。

也有可能因为你没有内容而没有设置宽度，div不会伸展到任何东西。

只是在没有真正测试的情况下看到它的一些想法。

CSS DIV默认宽度在IE中看起来不错。不是Firefox

2 个答案: