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

我想创建一个流体/灵活的弯曲角盒。理想情况下，它应该是多功能的，所以内容可以出现在框的顶部/底部。背景图像位置保持在顶部，而不是在IE6底部

按理说，我应该能够使用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;它拒绝做类似于背景图像垂直定位的任何事情。我甚至尝试将top 2 div（.tl和.tr）的背景位置从顶部改为50％，但在IE6中，它保持为0.

我试过使用完整/长手背景属性（背景图像/背景重复/背景位置），我试过了x/y版本（背景位置x /背景位置y）等。

看来，如果我使用_height ：或者_overflow-y：属性使IE伸展所需的高度，它削弱了它垂直放置图像的能力。

我该怎么做？

来源

2011-06-27 theclueless1

如果我是你，我会考虑使用CSS PIE在所有浏览器中实现圆角。这是重量轻和渐进友好：http://css3pie.com/documentation/supported-css3-features/ – Dan

@丹：我希望有一个CSS方法/路线，而不是诉诸JS等。 – theclueless1

嗯 - 我可以用6个div来管理它（[TL [TR]] [ML [MR]] [BL [BR]]），其中css与上面的类似（将绝对位置应用于#Rs，高度/溢出到ML ...所以我想这是最好的，我会得到：S – theclueless1

正如意见中提到的@丹，你真的不应该再使用了圆角这种角落成像技术。

您应该使用CSS属性border-radius这一点。

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

现在你并不需要所有这些额外的标记，或所有这些不必要的课程，或所有毛茸茸的CSS。

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

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

如果CSS3Pie的下载，体重太重了你（这是33K），也有一些其他类似的项目，其中做同样的事情，但功能较少。在CSS3Pie出现之前，我曾经推荐使用HTMLRemix来代替。这只有5k左右，但不是很好。

来源

2011-07-01 11:57:22 Spudley

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

回答

相关问题