CSS视觉轻弹

Question

我的CSS知识非常有限，所以我把我的问题放在这里，希望能有最好的结果。

我在我的网站中使用这个框：http://www.456bereastreet.com/lab/flexible_custom_corners_borders/，我需要以两列的格式显示内容。

我尝试过使用简单的表，并使用带有浮动集的div(需要清晰的修复以便父对象获得它的高度)。我的问题是出现在左侧的视觉错误。

仅在table和div浮动的情况下发生。p、h1等都可以正常工作。

下面是这个bug的图片：http://img18.imageshack.us/img18/8783/imagem2hdp.png

谢谢

编辑:代码如下：http://dl.getdropbox.com/u/178438/css_test.zip

Answer 1

您应该为.content设置背景色，这将隐藏边框图像的那部分。

--编辑如下--

渐变和边框之间的额外空白看起来像是一个元素被推到了一边，而实际上它是左边框背景图像的一部分，也就是第二个主要div。

div // Right border
    div // Top border with corner sub divs
    div // Left border
        div // Content
    div // Bottom border with corner sub divs

由于框的内容部分位于左侧边框div内，并且边框背景图像是精灵样式，将多个图像放在一起放在一个较大的图像中，因此CSS对此的唯一解决方案是将背景颜色应用于内容区域以覆盖左侧背景图像(就像左侧背景div对右侧背景div所做的那样)。

还有其他方法可以解决这个问题，比如将图像分离到单独的文件中，或者将内容div移到左侧边框div之外，但在这一点上，您实际上不再使用相同的框。