0

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

按理说，我应该能够使用 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 版本（背景位置-x/背景位置-y）等。

似乎如果我使用 _height: 或 _overflow-y: 属性使 IE 拉伸所需的高度，它会削弱其垂直定位图像的能力。

我怎样才能做到这一点？

4

1 回答 1

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，但不是那么好。

于 2011-07-01T11:57:22.830 回答