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

【问题标题】：Background-image-position stays at top, not bottom in IE6背景图像位置在 IE6 中保持在顶部，而不是底部
【发布时间】：2011-09-23 21:25:38
【问题描述】：

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

按理说，我应该可以使用 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;}

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

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

我尝试过使用完整/长手背景属性（背景图像/背景重复/背景位置）并且我尝试过 x/y 版本（背景位置-x/背景-位置-y）等等

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

我该怎么做？

【问题讨论】：

如果我是你，我会考虑使用 CSS PIE 在所有浏览器中实现圆角。它重量轻，进步友好：css3pie.com/documentation/supported-css3-features
@Dan ：我希望有一个 CSS 方法/路由，而不是诉诸 JS 之类的。
好吧 - 我可以用 6 个 div 来管理它，([TL[TR]][ML[MR]][BL[BR]]) 与上面的 css 类似（将绝对位置应用于#Rs，以及 ML 的高度/溢出......所以我想这是我能得到的最好的：s

标签： css internet-explorer background-image internet-explorer-6 background-position

【解决方案1】：

正如@Dan 在 cmets 中提到的，您真的不应该再将这种角图像技术用于圆角。

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

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

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

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

它还为 IE 添加了对许多其他有用的 CSS3 功能的支持。

如果 CSS3Pie 的下载量对你来说太大（它是 33k），还有一些其他类似的项目可以做同样的事情，但功能更少。在 CSS3Pie 出现之前，我曾经推荐过 HTMLRemix 的那个。那只是大约 5k，但不是那么好。

【讨论】：