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。

我尝试使用完整/长手背景属性（背景图像/背景重复/背景位置），我尝试过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，但不是那么好。

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

1 个答案: