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实际上位于右边：1px。当宽度为奇数数字时，我看不到选项卡的右手灰色，并且div按预期显示。

我正在使用的图像here。可以找到完整的示例here。

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

Answer 1

问题在于我的div的宽度是一个偶数，我最终得到1px 右手边界，好像是顶部正确的div正在被定位右：1px。当宽度是奇数号码我看不到右手选项卡的灰色和div是按预期显示。

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

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

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

Answer 2

你试过吗

body { 保证金：0; }

Answer 3

尝试：

right:-1px;

for IE6

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

3 个答案: