如何让margin在IE、Firefox、Chrome、Safari下兼容

今天在项目中遇到一个margin属性在不同浏览器下显示不一致的问题，代码如下：

html:

<div class="mod-appraise-detail">
    	<span class="jiantou-blue"></span>
    	<span class="jiantou-white"></span>
		<ul >
    		<li class="appraise-point" >
                <p >综合得分</p>  
        		<p class="point" style="line-height: 100%;">4.5</p>
            </li>
    		<li class="appraise-content">
    			<p class="appraise-title" >评估说明：</p>  
        		<p class="appraise-content-detail">该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。</p>
            </li>
		</ul>
     </div>

css:

.appraise-text{
	color:#444444;
}
.show-appraise-button{
	color:#0064ca;cursor: pointer;
}
.mod-appraise-detail {
	display: block;position: absolute;border: 1px solid #e7d3ac;background-color: #fffbdd;width: 280px;text-align: left;
	color: #444444;line-height: 18px;z-index: 99;padding: 5px;
}
.mod-appraise-detail .jiantou-blue,.mod-appraise-detail .jiantou-white {
	position: absolute;left: 25px;width: 0;height: 0;font-size: 0;overflow: hidden;border-width: 8px 5px;
}
.mod-appraise-detail .jiantou-white {
	top: -14px;border-color: transparent transparent white transparent;border-style: dashed dashed solid dashed;
}
.mod-appraise-detail .jiantou-blue {
	top: -16px;border-color: transparent transparent #e7d3ac transparent;border-style: dashed dashed solid dashed;
}
.mod-appraise-detail .appraise-tips-icon{
	float:left;margin:5px 15px 0 8px;
}
.mod-appraise-detail .appraise-point{
	float:left;
	color:#ff7300;
	margin:5px 12px 5px 10px;
	border-right:1px solid #e7d3ac;
	padding-right:15px;
	width:48px;
}
.mod-appraise-detail .appraise-point .point{
	font-size: 33px;text-align:center;
}
.mod-appraise-detail .appraise-content{
	float: left;
	width: 194px;
}
.mod-appraise-detail .appraise-title{
	color:#ff7300;font-weight:bold;margin:3px 5px 1px 5px;
}
.mod-appraise-detail .appraise-content-detail{
	margin-left:5px;
}

还有这样在ff和chrome下是正常的，但是在ie6下面就不行了，因为ie6下右移了5个像素，一开始改为下面的代码：

.mod-appraise-detail .appraise-point{
	float:left;
	color:#ff7300;
        margin-left: 5px;/*for IE*/
	margin:5px 12px 5px 10px !important;/*for Firefox*/
	border-right:1px solid #e7d3ac;
	padding-right:15px;
	width:48px;
}

因为IE不识别 !important。其次，定义顺序，IE以最后一个属性的定义为最终的网页识别定义，虽然不识别！important，但是，IE识别了10px这个高度设置，所以还是失败。最后改为下面这样，终于可以了：

.mod-appraise-detail .appraise-point{
	float:left;
	color:#ff7300;
	margin:5px 12px 5px 10px;
	*margin:5px 12px 5px 5px;
	border-right:1px solid #e7d3ac;
	padding-right:15px;
	width:48px;
}

然后上网查了一些资料，有如下解释：

（1）在属性定义时，先做完整的闭合处理，即

margin:15px 0 0 0; /*上、右、下、左*/

（2）特别定义IE能识别，而其它浏览器不识别的处理，即

*margin:10px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/

（3）定义两个margin，其中一个只让IE识别，另一个做一般化处理，即：

*margin:10px 0 0 0;  /*IE 6, IE 7, IE 8 可识别*/

margin:15px 0 0 0; /*一般化定义，也注意闭合，并且定义往下多占据5个像素*/

记录下，后面注意点。