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

Question

我在此处找到了一个示例使用单个图像使用圆角。我已经在 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 间隙？

Answer 1

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

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

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

我已经编写了一个来修复定位顶部和底部时的高度计算，并将高度保留为自动。我在 此脚本 上使用vialink.com.br/" rel="nofollow noreferrer">此网站。根据您的原因，可以修改此脚本以根据 available_width-(right+width) 计算左偏移量。

Answer 2

你试过

身体吗{
保证金：0；
}

Answer 3

尝试使用：

right:-1px;

对于 IE6