写的一个demo，在网页缩放时（测试浏览器：360安全浏览器），元素的位置会发生偏移。
而我仿写的网站：http://www.lecai.com/ 他做的二级菜单页面却不会出现位置偏移的现象，这是为什么？
以下是出现问题的页面代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
body,div,ul,p{margin:auto;padding:0px;font-family:微软雅黑;position:relative;}
ul{list-style-type:none;}
a{text-decoration:none;color:black;display:block;}
.select_cz_list{width:253px;height:432px;box-sizing:border-box;border:2px solid rgb(204,64,24);margin-top:10px;margin-left:40px;overflow:hidde;}
.select_cz_list>li{width:100%;height:53.5px;box-sizing:border-box;border-bottom:1px dashed #ccc;}
.select_cz_list>li:last-child{border-bottom:0px;}
.select_cz_list>li>a {display:inline-block;width:167px;margin-left:5px;text-overflow:ellipsis;height:100%;box-sizing:border-box;padding:1.25px 0px;vertical-align:middle;color:rgb(231,71,23);}
.select_cz_list>li>a:hover{text-decoration:underline;}
.select_cz_list>li>a img{width:50px;height:50px;vertical-align:middle;}
.select_cz_list>li>a span{font-size:17px;margin-left:5px;}
.select_cz_list>li>span{display:inline-block;max-width:70px;font-size:13px;text-align:left;}
.hot_cz{position:relative;}
.hot_cz>*{display:inline-block;vertical-align:middle;}
.hot_cz>div:nth-of-type(1){width:53.563px;height:100%;margin-left:0px;font-size:14px;}
.hot_cz>div:nth-of-type(1) span{display:inline-block;width:1px;line-height:16px;margin-top:2px;margin-left:19.7815px;}
.cz_type_select:after{display:block;clear:both;content:' ';}
.cz_type_select>div{color:black !important;font-size:12px;float:left;box-sizing:border-box;height:100%;}
.cz_type_select>div:nth-of-type(1){width:90px;}
.cz_type_select>div a{transition:all 0.2s linear;-webkit-transition:all 0.1s linear;-moz-transition:all 0.1s linear;-ms-transition:all 0.1s linear;-o-transition:all 0.1s linear;}
.cz_type_select>div a:hover{color:rgb(231,71,23);}
.hot_cz img{width:8px;height:12px;position:absolute;right:5px;top:50%;margin-top:-6px;}
/*total*/
.highFreqCon,.numericCon{border:1px solid rgb(204,64,24);width:405px;height:88px;padding:10px 20px;position:absolute;left:249px;font-size:12px;color:rgba(30,30,30,0.8);word-wrap:break-word;word-break:keep-all;}
/*header*/
.cz_type_header{font-size:16px;color:rgb(231,71,23);}
/*btn*/
.cz_type_btn a{display:inline-block;padding:8px 0px;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;}
.cz_type_btn a:hover{color:rgb(231,71,23);}
/*line*/
.alternate_line_top,.alternate_line_bottom{height:52.5px;width:4px;background-color:white;position:absolute;left:-1px;z-index:10000;}
/*高频*/
.highFreqCon{top:-1px;}
.alternate_line_top{top:0px;}
/*数字彩*/
.numericCon{bottom:-2px;}
.alternate_line_bottom{bottom:0px;height:53.5px;}
.hide{display:none;}
</style>
<ul class='select_cz_list' id='select_cz_list'>
<li>
<a href='javascript:void(0);'>
<img src='/img/lottery.png' alt='' title='' />
<span class='cz_name'>重庆时时彩</span>
</a>
<span>每天120期</span>
</li>
<li>
<a href='javascript:void(0);'>
<img src='/img/lottery.png' alt='' title='' />
<span class='cz_name'>江西时时彩</span>
</a>
<span>每天084期</span>
</li>
<li>
<a href='javascript:void(0);'>
<img src='/img/eleven_select_five.png' alt='' title='' />
<span class='cz_name'>广东11选5</span>
</a>
<span>每天084期</span>
</li>
<li>
<a href='javascript:void(0);'>
<img src='/img/pk_ten.png' alt='' title='' />
<span class='cz_name'>北京PK10</span>
</a>
<span>每天179期</span>
</li>
<li>
<a href='javascript:void(0);'>
<img src='/img/eleven_get_gold.png' alt='' title='' />
<span class='cz_name'>十一夺运金</span>
</a>
<span>人气最旺</span>
</li>
<li>
<a href='javascript:void(0);'>
<img src='/img/3d.png' alt='' title='' />
<span class='cz_name'>福彩3D</span>
</a>
<span>简单好玩</span>
</li>
<li class='hot_cz' id='highFreqCon'>
<div>
<span>高频彩</span>
</div>
<div class='cz_type_select'>
<div>
<a href='javscript:void(0);' class='top odd'>江西时时彩</a>
<a href='javscript:void(0);' class='top even'>新疆时时彩</a>
</div>
<div>
<a href='javscript:void(0);' class='bottom odd'>江西11选5</a>
<a href='javscript:void(0);' class='bottom even'>北京11选5</a>
</div>
</div>
<img src='/img/list_right.png' alt='' title='' />
<div class='highFreqCon hide'>
<p class='cz_type_header'>高频彩</p>
<div class='cz_type_btn'>
<a href='javascript:void(0);'>重庆时时彩</a> |
<a href='javascript:void(0);'>江西时时彩</a> |
<a href='javascript:void(0);'>新疆时时彩</a> |
<a href='javascript:void(0);'>天津时时彩</a> |
<a href='javascript:void(0);'>北京赛车PK10</a> |
<a href='javascript:void(0);'>广东11选5</a> |
<a href='javascript:void(0);'>江西11选5</a> |
<a href='javascript:void(0);'>江苏11选五</a> |
<a href='javascript:void(0);'>北京11选5</a> |
<a href='javascript:void(0);'>北京快乐8</a> |
</div>
<div class='alternate_line_top'></div>
</div>
</li>
<li class='hot_cz' id='numericCon'>
<div>
<span>数字彩</span>
</div>
<div class='cz_type_select'>
<div>
<a href='javscript:void(0);' class='top odd'>广东快乐十分</a>
<a href='javscript:void(0);' class='top even'>排列3</a>
</div>
<div>
<a href='javscript:void(0);' class='bottom odd'>江苏快3</a>
<a href='javscript:void(0);' class='bottom even'>排列5</a>
</div>
</div>
<img src='/img/list_right.png' alt='' title='' />
<div class='numericCon hid'>
<p class='cz_type_header'>数字彩</p>
<div class='cz_type_btn'>
<a href='javascript:void(0);'>3D</a> |
<a href='javascript:void(0);'>排列3</a> |
<a href='javascript:void(0);'>排列5</a> |
<a href='javascript:void(0);'>江苏快3</a> |
<a href='javascript:void(0);'>吉林快三</a> |
<a href='javascript:void(0);'>十一夺云金</a> |
<a href='javascript:void(0);'>广东快乐10分</a> |
<a href='javascript:void(0);'>河南快乐十分</a> |
</div>
<div class='alternate_line_bottom'></div>
</div>
</li>
</ul>
<script>
/*-----js快速选择器-----*/
function $(data){
return document.querySelectorAll(data);
}
function $id(id){
return document.getElementById(id);
}
function $cn(cn,doc){
if (doc!==undefined){
return doc.getElementsByClassName(cn);
}else{
return document.getElementsByClassName(cn);
}
}
function $name(name,doc){
if (doc!==undefined){
return doc.getElementsByName(name);
}else{
return document.getElementsByName(name);
}
}
function $tg(tg,doc){
if (doc!==undefined){
return doc.getElementsByTagName(tg);
}else{
return document.getElementsByTagName(tg);
}
}
// 兼容性 添加 删除 替换 类名
var cso={
add:function(ele,cn){
var origin=ele.className;
var last=origin.slice(-1);
if (origin.search(cn)!==-1){
cso.remove(ele,cn);
if (last===' '){
ele.className=origin+cn;
}else{
ele.className=origin+' '+cn;
}
}else{
if (last===' '){
ele.className=origin+cn;
}else{
ele.className=origin+' '+cn;
}
}
},
remove:function(ele,cn){
var origin=ele.className;
if (origin.search(cn)===-1){
return ;
}
var result=origin.split(' ');
for (var i=0;i<result.length;++i)
{
if (result[i].search(cn)!==-1){
result.splice(i,1);
i--;
}
}
result=result.join(' ');
ele.className=result;
},
replace:function(ele,newCn,oldCn){
cso.remove(ele,oldCn);
cso.add(ele,newCn);
}
};
var menuEvent={
ul:$id('select_cz_list'),
highFreqCon:$id('highFreqCon'),
numericCon:$id('numericCon'),
overStyle:'1px solid rgb(204,64,24)',
outStyle:'1px dashed #ccc',
showH:function(){
var prevEle=menuEvent.highFreqCon.previousElementSibling;
prevEle.style['border-bottom']=menuEvent.overStyle;
menuEvent.highFreqCon.style['border-bottom']=menuEvent.overStyle;
menuEvent.ul.style['border-bottom']=menuEvent.overStyle;
var triangle=$tg('img',menuEvent.highFreqCon)[0];
cso.add(triangle,'hide');
cso.remove($cn('highFreqCon',menuEvent.highFreqCon)[0],'hide');
},
hideH:function(){
var prevEle=menuEvent.highFreqCon.previousElementSibling;
prevEle.style['border-bottom']=menuEvent.outStyle;
menuEvent.highFreqCon.style['border-bottom']=menuEvent.outStyle;
menuEvent.ul.style['border-bottom']='2px solid rgb(204,64,24)';
var triangle=$tg('img',menuEvent.highFreqCon)[0];
cso.remove(triangle,'hide');
cso.add($cn('highFreqCon',menuEvent.highFreqCon)[0],'hide');
},
showN:function(){
var prevEle=menuEvent.numericCon.previousElementSibling;
prevEle.style['border-bottom']=menuEvent.overStyle;
menuEvent.ul.style['border-bottom']=menuEvent.overStyle;
var triangle=$tg('img',menuEvent.highFreqCon)[0];
cso.add(triangle,'hide');
cso.remove($cn('numericCon',menuEvent.nemericCon)[0],'hide');
},
hideN:function(){
var prevEle=menuEvent.numericCon.previousElementSibling;
prevEle.style['border-bottom']=menuEvent.outStyle;
menuEvent.ul.style['border-bottom']='2px solid rgb(204,64,24)';
var triangle=$tg('img',menuEvent.highFreqCon)[0];
cso.remove(triangle,'hide');
cso.add($cn('numericCon',menuEvent.nemericCon)[0],'hide');
},
start:function(tip){
switch (tip)
{
case 'showH':
menuEvent.showH();
break;
case 'hideH':
menuEvent.hideH();
break;
case 'showN':
menuEvent.showN();
break;
case 'hideN':
menuEvent.hideN();
break;
}
}
};
$id('highFreqCon').onmouseenter=menuEvent.start.bind(null,'showH');
$id('highFreqCon').onmouseleave=menuEvent.start.bind(null,'hideH');
$id('numericCon').onmouseenter=menuEvent.start.bind(null,'showN');
$id('numericCon').onmouseleave=menuEvent.start.bind(null,'hideN');
</script>
</body>
</html>