为什么工具提示(悬停)在 Firefox 和 IE 中出现错误,Chrome 很好
示例http://dabblet.com/gist/3450459
CSS
.hiq-checkin img { float: left;display: block;margin-right: -2px;}
.visited-profile {float: left;}
.visited-profile a {color: #333 !important;text-decoration:none;position: relative;}
.green-badge {position: relative;z-index: 601;background: url('http://png-3.findicons.com/files//icons/1689/splashy/16/check.png') no-repeat;width: 10px;height: 15px;display: inline-block;float: none;}
.idea-ttip-wrapper {position: absolute;width: 156px;z-index: 602;margin-top: -8px;display: none;margin-left: -53px;}
.ttip-arrow {background: url('http://www.splitbrain.org/_static/ico/semlabs/ico/arrow_up.png');height: 7px;width: 11px;position: absolute;left: 23px;top: -5px;}
.idea-ttip-content {background: #ffffcc;border: 2px solid #cccc99;display: inline-block;text-decoration: none;color: #666;padding: 6px;font-size: 10px;}
.visited-profile a:hover .idea-ttip-wrapper, .visited-profile a:focus .idea-ttip-wrapper { display: block;}
HTML
<div class="hiq-checkin row-id">
<div class="visited-profile without-photo">
<a href="#">
<span class="green-badge"></span> XXXXX,
<div class="idea-ttip-wrapper">
<div class="ttip-arrow"></div>
<div class="idea-ttip-content">
xxxxx xxxxx<br>
lorem for ipsum xxx
</div>
</div>
</a>
<a href="#">
ZZZZZ,
</a>
<a href="#">
<span class="green-badge"></span> ACSCS
<div class="idea-ttip-wrapper">
<div class="ttip-arrow"></div>
<div class="idea-ttip-content">
xxxxx xxxxx<br>
lorem for ipsum xxx
</div>
</div>
</a>
<span style="line-height: 2.5;"> edfsfsfsdn sdfdsf fsdsdfdfs </span>
</div>
</div>