div 容器清理？答案

【问题标题】：Div Container Cleanup?div 容器清理？
【发布时间】：2011-05-29 16:09:39
【问题描述】：

只是想知道是否可以清理（做同样事情所需的代码更少）制作这个 div 容器。基本上它只是一个带有背景图像的 div，但是 div 的顶部和底部具有圆角图形角，这就是为什么我在容器 div 内有顶部、中间和底部 div。

<div class="fbox">
<div class="ftop"></div>
<div class="fmid">

Fullbox Text Goes Here

</div>
<div class="fbot"></div>
</div>

CSS：

 .fbox {
  width: 934px;
  margin: 0 auto;
  opacity: 0.70;
 }

 .ftop {
  width: 934px;
  background:url(../images/cb/full.png) no-repeat 0 -34px;
  height: 17px;
  margin:0
 }
 .fmid {
  width: 894px;
  padding-left: 20px;
  padding-right: 20px;
  background:url(../images/cb/fullmid.png) repeat-y;
  min-height: 50px;
  margin:0
 }
 .fbot {
  width: 934px;
  background:url(../images/cb/full.png) no-repeat 0 -17px;
  height: 17px;
  margin:0
 }

结果： http://img709.imageshack.us/img709/6681/fbox.jpg

【问题讨论】：

标签： css html

【解决方案1】：

http://www.the-art-of-web.com/css/border-radius/

您可以将 CSS 边框半径与单个 div 一起使用，而不是创建顶部和底部。 IE 无法识别这一点，但也有一些方便的解决方法。

我通常会使用 CSS3 PIE，它是 IE 的一种 htc 行为。它还做了很多其他的事情，比如线性渐变背景颜色等。你所做的就是为每个浏览器提供边框半径 css，浏览器就会知道要使用哪个。 http://css3pie.com/

.yourbox {
   /* PIE Sample */
    border: 1px solid #696;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/PIE.htc);
}

不过，您真正需要的只是其他浏览器的边框半径。

【讨论】：

谢谢，但在这里选择 CSS2，抱歉没有指定。
在下面提供了不同的解决方案，但应注意 CSS3 PIE htc 行为不是实际的 CSS3。它只是作为 IE 糟糕透顶的拐杖。

【解决方案2】：

您可以使用border-radius CSS 属性。在 Firefox 中，您将使用 -moz-border-radius，而在 WebKit 中，您将使用 -webkit-border-radius。我一般会使用这三个。这将使盒子的角落变圆，而不需要所有额外的 div。

当然，IE的用户是S.O.L。但有时你必须付出一点才能得到一点，对吧？ :)

<div id="box">Blah blah blah.</div>
#box{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}

【讨论】：

并不是我想要的。我知道边界半径，但它除了 FF 之外并没有什么作用，这就是我以图形方式进行操作的原因。我正在尝试仅使用 CSS2 以及与 x-browser 兼容。

【解决方案3】：

最简单的方法是使用边框半径，但它并非在所有浏览器中都兼容。支持是体面的。此外，覆盖所有受支持的浏览器需要供应商特定的代码，这有点烦人：

-webkit-border-radius: 4px; /* Vendor code */
-moz-border-radius: 4px; /* Vendor code */
border-radius: 4px; /* CSS 3 Standard */

您可以在应用了border-radius 的情况下为div 添加边框，它会按照您的希望跟随圆角。

【讨论】：

并不是我想要的。我知道边界半径，但它除了 FF 之外并没有什么作用，这就是我以图形方式进行操作的原因。我正在尝试仅使用 CSS2 以及与 x-browser 兼容。
Firefox、Opera、Safari、Chrome 支持边界半径，并且供应商特定的代码使不同版本的 webkit 和壁虎能够正确呈现我所知道的许多移动设备 - 我个人认为现在值得去。抱歉，我无法提供更好的答案！
我想但是 IE 没有，我的网站用户超过 75%...所以相比之下，所有这些都无关紧要 =\

【解决方案4】：

如果您必须使用听起来像的图像。创建具有所需边框的单个图像文件，并使用特殊的 css 选择器来调整背景位置，这样您就不会加载 3 个不同的背景图像。

.fbox .border {
   background: url(bg.png);
}
.border.mid {
   background-position: center center;
   background-repeat: repeat-y
}
.border.top {
   background-position: top left;
   background-repeat: no-repeat
}

等等等等

我不能确切地说您将如何调整背景位置，因为这取决于您使用的图像以及您是否使用恒定的固定宽度。但我强烈建议只使用一张图片，然后使用额外的选择器来移动背景位置。

【讨论】：