CSS - 在 IE6 中的“right:0px”时，绝对定位的 div 不会粘在右边缘

Question

我找到了一个示例 here 使用单个图像使用圆角。我在 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 会按预期显示。

我使用的图片可以在here找到。一个完整的例子可以在here找到。

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

Answer 1

问题是当我的 div 的宽度 是偶数，我最终得到一个 1px 右侧边框，好像顶部 正确的 div 实际上正在定位 如右：1px。当宽度为奇数时 数字我没有看到右手 选项卡和 div 的灰色是 按预期显示。

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

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

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

Answer 2

你试过了吗

身体{ 边距：0； }

Answer 3

尝试：

right:-1px;

IE6