Question

我有一些CSS的问题，我希望得到一些帮助。

我有一个div，它有一个背景图形（弯曲的顶部边缘图像），这会导致我出现问题。在这个div中，我有许多标题和一般内容的其他div。

我的代码在FireFox中工作，但在IE 6和7中没有。我有另一个背景图形，我需要放在右侧，在主背景图形上，但我无法在IE6 / 7中使用它！它适用于IE8

你可以在这里看到我的问题，使用IE，弯曲的红色边缘的宽度导致内容区域宽度更小。 Firefox示例（FF.jpg）是正确的，内容区域是全宽的。

下面的标记：

<div class="RedCorner"></div>
<div class="header"></div>
<div class="tab-content">

下面的css：

.RedCorner {
    float: right;
    background-image: url(/red_rounded.gif);
    background-repeat: no-repeat;
    margin-right: -25px;
    margin-top: 1px;
    width: 140px;
    height: 40px;
}

有什么建议吗？非常感谢，一如既往詹姆斯

Answer 1

发生这种情况的原因是因为IE有double margin bug之类的东西。请尝试使用绝对定位，首先确保.RedCorner的父级具有：

position: relative;

然后：

.RedCorner {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 40px;
    background-image: url(/red_rounded.gif);
    background-repeat: no-repeat;
}

IE6和7的标记/ css背景图形问题

1 个答案: