IE6 中背景图像位置保持在顶部，而不是底部

Question

我想创建一个流体/灵活的弧形角盒。 理想情况下，它应该是多功能的，因此内容可以出现在盒子的顶部/底部。

按理说，我应该能够使用 4 个元素 (div) 和一个图像。 我几乎可以在所有浏览器中使用它 - 除了 IE6。

我已经修改了 http://www.schillmania.com/projects/dialog2/basic 的代码.html 这样我就有了以下标记和CSS；

<div class="boxtl boxcontent">
    <div class="boxtr boxcontentside">tr</div>
        <p>This is the top half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>
<div class="boxbl boxcontent2">
    <div class="boxbr boxcontentside">br</div>
        <p>This is the bottom half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>


.boxtl, .boxtr, .boxbl, .boxbr {position:relative; zoom:1; background: url(../revised-images/testbox2.png) no-repeat 0 0; _background: url(../revised-images/testbox2ie.png) no-repeat 0 0; height:auto;}
.boxtl {margin-right:20px; }
.boxtr {margin-right:-20px; width:20px; height:20px; position:absolute; left:100%; top:0;  background-position: 100% 0; }
.boxbl {margin-right:20px; background-position: 0 100%;}
.boxbr {margin-right:-20px; width:20px; position:absolute; left:100%; top:0; background-position: 100% 100%;}
.boxcontent {padding:20px 0 1px 20px; position:relative; zoom:1; _overflow-y:hidden; width:auto;}
.boxcontentside {height:100%; _height:2000px;}

我使用了一个大的单框图像（2000px H/W）。 这个方法的想法是我可以使用 alpha 透明度（角、阴影等）， 没有重叠等

。

问题是IE6；它拒绝执行任何类似于背景图像垂直定位的操作。我什至尝试将顶部 2 个 div（.tl 和 .tr）的背景位置更改为距离顶部 50%，但在 IE6 中，它保持在 0。

我尝试使用全/长手背景属性（背景-image/background Repeat/background-position)并且我尝试了x/y版本(background-position-x/background-position-y)等。

看来我是否使用_height:或_overflow-y：使 IE 拉伸所需高度的属性，它削弱了其垂直定位图像的能力。

我该怎么做？

Answer 1

正如@Dan 在评论中提到的，你真的不应该再使用这种圆角图像技术。

为此，您应该使用 CSS 属性 border-radius。

IE6-8不支持border-radius，但您可以使用CSS3Pie脚本向这些旧版本的 IE 添加对此属性的支持。

现在，您不需要所有额外的标记，或所有不必要的类，或所有繁琐的 CSS。

CSS3Pie 的美妙之处在于它只能在 IE 中运行。在所有其他浏览器中，您将使用纯 CSS，它们将忽略 CSS3Pie 脚本。在 IE 中，是的，它是一个 javascript 解决方案，但它是轻量级的（通常比为角下载多个图像文件更轻），如果它不运行，则后退只是方角；这并不是世界上最糟糕的事情。

它还增加了对 IE 的支持，以实现许多其他有用的 CSS3 功能。

如果 CSS3Pie 的下载量对您来说太大了（33k），还有一些其他类似的项目可以做同样的事情，但功能较少。在 CSS3Pie 出现之前，我曾经推荐 HTMLRemix 相反。虽然只有 5k 左右，但还不够好。