html - 我怎样才能更好地使用带有图像/边框的网格代码？

Question

首先，请不要回答“使用 border-radius + css3pie 或 jquery 插件”:我知道有其他方法可以用 css3 做到这一点，但我不介意。

这是我的全部代码:

.menu_books_top-bottom { width:171px; height:7px; background-color:#76614C; float:left;}
.menu_books_center { width:155px; background-color:#76614C; padding:10px 15px 10px 15px; float:left;}
.menu_books_top-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-left.png); float:left;}
.menu_books_top-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-right.png); float:left;}
.menu_books_bottom-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-right.png); float:left;}
.menu_books_bottom-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-left.png); float:left;}

<div class="menu_books_top-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_top-right">&nbsp;</div>                  
<div class="menu_books_center">
    Content
</div>
<div class="menu_books_bottom-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_bottom-right">&nbsp;</div>

但是如您所见，它看起来不太好!还有其他方法可以做到吗？或者我可以改进这段代码(例如经典方法)吗？

Here你可以找到一个例子。 (红色=带边框的图像)

Answer 1

考虑到 I know you need IE6 支持，你所拥有的似乎是合理的。

我对其进行了重组并进行了一些清理。

参见: http://jsfiddle.net/5wzC2/

我还确保它在现代浏览器和 IE6 中看起来一样。

• 我将 div 更改为 span(如@SirB 的回答)。
• 我删除了  ，并添加了 line-height:0; font-size:0 修复 IE6。
• 我添加了一个 corner 类来删除所有 width:10px;高度:10px；
float :左。
• 我从 HTML 中删除了短语 menu_books 的一些实例。
• 我将 background-image 更改为 background，它在这里可以使用并且稍微短一些。

是的，只是一堆学究气的改动。