首先,请不要回答“使用 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"> </div>
<div class="menu_books_top-bottom"> </div>
<div class="menu_books_top-right"> </div>
<div class="menu_books_center">
Content
</div>
<div class="menu_books_bottom-left"> </div>
<div class="menu_books_top-bottom"> </div>
<div class="menu_books_bottom-right"> </div>
但是如您所见,它看起来不太好!还有其他方法可以做到吗?或者我可以改进这段代码(例如经典方法)吗?
Here你可以找到一个例子。 (红色=带边框的图像)
最佳答案
考虑到 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
,它在这里可以使用并且稍微短一些。
是的,只是一堆学究气的改动。
关于html - 我怎样才能更好地使用带有图像/边框的网格代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6002337/