这是jquery代码，所有浏览器完美显示 把box-sizing的内容注释掉，jquery中写法如下 $(function(){ //给个按钮驾鼠标滑过动作 $('.button').hover( function(){//鼠标悬浮时的事件 //1.获取需要显示的内容 var $this = $(this); var txt = $this.attr('data'); //2.将获得到的值放入tip em中 var $tip = $('.tip');//取得em对象 $('.tip em').text(txt);//为em对象放置文本值 //3.同时改变tip的位置 //3.1获得每个按钮相对于父元素的位置,此处只需要获得left值 var this_left = $this.position().left; //3.2设置tip与该按钮垂直剧中对齐 var tip_width = $tip.outerWidth();//获取每个em的宽度 var this_width = $this.outerWidth();//此按钮的宽度 var tip_pos = (this_left+this_width/2)-tip_width/2; $tip.css({left:tip_pos+"px"}).animate({top:'145px','opacity':1},500); }, function(){//鼠标离开时的事件 $('.tip').animate({'top':'110px','opacity':0},300); }); }); // 此方法几点说明 // 1.关于box-sizing属性，在moz浏览器中支持的还不很好，有误差 // 2.上述tip_left的计算方法是先找到按钮中心距父元素左右的距离， // 然后用此距离-tip的宽度/2，即是tip的左边距 // 3.此方法计算的左边距，可以完美解决tip宽度比按钮宽度小的情况

圆角属性，兼容属性