0

我在这里找到了一个使用单个图像使用圆角的示例。我在 IE7+ 和 FireFox 中完美运行。

以下是一个示例选项卡布局：

<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 3</p></div>
</div>

以下是我的 CSS 样式：

.corner
{
        background:url(../Images/LightCorner.gif);
        position:absolute;
        width:13px;
        height:13px;
        overflow:hidden;    
}

.inner
{
        position:relative;
        padding:13px;
        margin:0px;
}

.inner p
{
        padding:0px;
}

.tab
{
        color:#FFF;
        float:left;
        font-weight:bold;
        margin-right:5px;
        position:relative;
        text-align:center;
}

.tab p
{
        margin:0px;
        padding:0px;
}

.tab
{
        background:#B5B5B5;
}


.TL
{
        top:0px;
        left:0px;
        background-position:0px 0px;
}
.TR
{
        top:0px;
        right:0px;
        background-position:-13px 0px;
}

.TL, .TR
{
        margin:0px;
        padding:0px;
        position:absolute;
}

问题是当我的 div 的宽度是偶数时，我最终会得到一个 1px 的右侧边框，就好像右上角的 div 实际上被定位为 right:1px。当宽度为奇数时，我看不到选项卡的右侧灰色，并且 div 按预期显示。

我使用的图像可以在这里找到。一个完整的例子可以在这里找到。

为什么右上角的 div 没有正确定位在 right:0px？当标签宽度为偶数时，为什么我在 IE6 中会出现 1px 的间隙？

4

3 回答 3

1

问题是当我的 div 的宽度是偶数时，我最终会得到一个 1px 的右侧边框，就好像右上角的 div 实际上被定位为 right:1px。当宽度为奇数时，我看不到选项卡的右侧灰色，并且 div 按预期显示。

您的代码没有任何内容，这是 Internet Explorer 6 中的一个错误。当将事物绝对定位到右侧或底部时，实际位置将四舍五入为 2px，当总宽度/高度为 1px 时给出“边距”偶数或奇数）。不幸的是，您需要 JavaScript 来解决这个问题。

您可以查看这个示例（由我编写），然后逐个像素地慢慢调整 IE6 窗口的大小。您会注意到底部和右侧框的位置将仅每两个像素更新一次。另一个人也在他的网站上发现并记录了这个错误。

我已经写了一个在定位顶部和底部时修复高度计算，并将高度保留为自动。我在这个网站上使用这个脚本。在您的原因中，可以修改此脚本以计算基于 的左偏移量。available_width-(right+width)

于 2009-09-12T13:37:18.447 回答
0

你有没有尝试过

身体{边距：0；}

于 2009-08-25T16:01:07.293 回答
0

尝试：

right:-1px;

对于 IE6

于 2009-08-25T16:06:41.447 回答