因此，我继续在我一直在处理的一个小型潜在客户生成表单上添加了一个工具提示。一切进行得都很顺利; 但是，在 Mozilla Firefox 中，一个元素的定位似乎无法正常运行。在 Chrome、Internet Explorer 和 Safari 中进行测试时，一切正常。在 Firefox 中，工具提示不会放在调用它的图像上方，而是放在右侧和上方。
这是它的样子：
http://img84.imageshack.us/img84/3930/correctx.jpg
这是不应该的样子：
http://img198.imageshack.us/img198/5223/incorrectw.jpg
下面是相关代码，HTML：
<div id="contact_container">
<h1><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons" src="images/information_icon.png"></a>How can we contact you?</h1>
<input id="phone_number" name="phone_number" type="text" />
<input id="alternate_phone_number" name="alternate_phone_number" type="text" />
<input id="email_address" name="email_address" type="text" />
<div class="vertical_filler_small"></div>
<h2 id="contact_time_subtitle"><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons_small" src="images/information_icon_small.png"></a>When should we call?</h2>
<fieldset id="contact_time">
<div class="contact_time_containers" id="contact_time_morning"><input id="contact_time_radio_morning" name="contact_time" type="radio" value="morning" /><span class="contact_time_options">Morning</span></div>
<div class="contact_time_containers" id="contact_time_afternoon"><input checked="checked" id="contact_time_radio_afternoon" name="contact_time" type="radio" value="afternoon" /><span class="contact_time_options">Afternoon</span></div>
<div class="contact_time_containers" id="contact_time_evening"><input id="contact_time_radio_evening" name="contact_time" type="radio" value="evening" /><span class="contact_time_options">Evening</span>
</fieldset>
</div>
和CSS：
body{background:#0d2635 url('../images/background.jpg') no-repeat center top;font-family:Arial,Helvetica,sans-serif;margin:0;text-align:center;}
h1{color:#fff;cursor:pointer;font-size:18px;font-weight:bold;margin:0;}
h2{color:#ff0;cursor:pointer;font-size:14px;font-weight:bold;margin:0;text-indent:3px;}
input[type="text"]{-khtml-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background-image:url('../images/background_text_inputs.jpg');border-color:#195d82 #11415c #6198b7 #1e74a6;border-radius:8px;border-width:1px;color:#aaa;float:left;font-size:12px;font-weight:bold;height:25px;line-height:100%;margin-top:8px;outline:none;padding:0;text-indent:5px;}
input[type="text"]:focus{color:#fff;border:1px solid #ff0;}
input[type="radio"]{cursor:pointer;}
img{border:none;}
img.information_icons{left:-2px;position:relative;top:4px;}
img.information_icons_small{left:-2px;position:relative;top:3px;}
div#contact_container{float:left;width:300px;}
input#phone_number{float:left;margin-right:10px;width:140px;}
input#alternate_phone_number{float:left;width:140px;}
input#email_address{float:left;margin-right:10px;width:280px;}
div.vertical_filler_small{float:left;height:10px;width:300px;}
fieldset#contact_time{border:none;display:block;float:left;}
div.contact_time_containers{cursor:pointer;float:left;margin-right:5px;}
span.contact_time_options{color:#ccc;font-size:14px;font-weight:bold;margin:0;}
a[data-tooltip]:link,a[data-tooltip]:visited{position:relative;text-decoration:none;}
a[data-tooltip]:before{content:"";visibility:hidden;}
a[data-tooltip]:after{-moz-border-radius:10px;-moz-box-shadow:0 8px 6px -6px black;-webkit-border-radius:10px;-webkit-box-shadow:0 8px 6px -6px black;background-color:#294466;border:1px solid #0f2e4d;border-radius:10px;box-shadow:0 8px 6px -6px black;color:#ff0;content:attr(data-tooltip);left:-16px;font-size:12px;padding:5px 15px;position:absolute;top:-20px;visibility:hidden;white-space:nowrap;}
a[data-tooltip]:hover:before,a[data-tooltip]:hover:after{-moz-transition:visibility 0s linear .1s;visibility:visible;}