用字符实现上下箭头

最新推荐文章于 2022-10-31 17:46:48 发布

sunxing007

最新推荐文章于 2022-10-31 17:46:48 发布

阅读量3.6k

点赞数

文章标签： class ie html layout 浏览器 css

本文链接：https://blog.csdn.net/sunxing007/article/details/6702851

版权

今天看了http://www.zhangxinxu.com/wordpress/2011/08/%e5%b0%8f%e5%8d%96%e5%bc%84%ef%bc%9a%e5%ad%97%e7%ac%a6%e4%b8%8a%e4%b8%8b%e5%8d%8a%e6%88%aa%e7%9a%84%e9%ab%98%e4%ba%ae%e6%98%be%e7%a4%ba/

发现点子确实不错, 但是作者的兼容性没做好, 多浏览器下一塌糊涂(包括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>