CSS视觉轻弹

Question

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

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

我已经尝试使用简单的表格，并使用带有浮点集的 div(需要 clearfix 以便父项获得其高度)。我的问题是出现在左侧的视觉错误。

仅在表格和 div float 时发生。 p、h1 等工作正常。

这是错误的图片: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 内，边框背景图像是 Sprite 样式，将多个图像放在一起形成一个更大的图像，因此唯一的 CSS 解决方案是对内容应用背景颜色覆盖左侧背景图像的区域(就像左侧背景 div 对右侧背景 div 所做的那样)

还有其他方法可以解决此问题，例如将图像分成单独的文件或将内容 div 移到左边框 div 之外，但此时您实际上不再使用同一个框。