发现点子确实不错, 但是作者的兼容性没做好, 多浏览器下一塌糊涂(包括ff4). 于是决心自己写一遍. 折腾了两个小时, 蛋疼...
代码贴出来, 以兹参考.
有关css hack部分, 我发现这篇真的很有帮助.http://blog.csdn.net/sunxing007/article/details/6598327
效果图:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Diamond arrow</title>
<style>
.diamond{
/**是内部两个子元素位置参考的基石**/
position: relative;
font-family: simsun;
font-size: 12px;
height: 15px;
width: 12px;
/**使整个diamond像字符一样显示, 有利于与前后的元素水平对齐排版**/
display: inline-block;
vertical-align: middle;/**这个你懂的**/
}
/**触发ie6, ie7的layout,使之像inline-block那样**/
.diamond{
*display: inline;
}
.diamond-top{
position: absolute;
height: 6px;
/*for ie6*/
*height: 8px;
overflow: hidden;
border-bottom: solid #fff 3px;
/*for ie6,ie8*/
border-bottom: solid #fff 2px\9;
}
/*for ie7*/
*+html .diamond-top{
height: 6px;
}
.diamond-bottom{
position: absolute;
top: 4px;
/*for ie6*/
top: 3px\9;
}
.diamond .sorted{
color: red;
}
</style>
</head>
<body>
<br /><br /><br />
Price <div class="diamond">
<span class="diamond-bottom">◆</span>
<span class="diamond-top sorted">◆</span>
</div> Price
<div class="diamond">
<span class="diamond-bottom sorted">◆</span>
<span class="diamond-top">◆</span>
</div>
</body>
</html>