CSS - 位置絕對不同於鉻/歌劇到Firefox/IE

我對CSS新手，和越來越瘋狂與此！請，可一些CSS專家告訴我，爲什麼這個提示窗口，在不同的位置從鉻/歌劇到Firefox/IE顯示：http://jsfiddle.net/73F7w/1/CSS - 位置絕對不同於鉻/歌劇到Firefox/IE

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html><body> 
<div id="body_cont_actv"> 
    <form id="form" name="form" method="POST" action="pg.asp?d=active&s=2" accept-charset="utf-8" style="width:284px; margin-top:20px;"> 
    <div id="frmdv"> 
     <div class="newrow"> 
     <label for="user"> 
      <span class="requ">Username:</span> 
      <input type="text" name="user" value="" maxlength="15" style="width:226px; text-transform:lowercase;"> 
     </label> 
     <a href="#" class="tooltip"> 
      <img src="images/help.gif" class="help"> 
      <span> 
      <strong>Username</strong><br> 
      Allowed only small letters and numbers. Max 15 chars. 
      </span> 
     </a> 
     </div> 
     <div class="newrow"> 
     <label for="pswd"> 
      <span class="requ">Password:</span> 
      <input type="password" name="pswd" value="" maxlength="15" style="width:102px; text-transform:lowercase;"> 
     </label> 
     <label for="conf"> 
      <span class="requ">Check Password:</span> 
      <input type="password" name="conf" value="" maxlength="15" style="width:102px; text-transform:lowercase;"> 
     </label> 
     <a href="#" class="tooltip"> 
      <img src="images/help.gif" class="help"> 
      <span> 
      <strong>Password</strong><br> 
      Allowed only small letters and numbers. Max 15 chars. 
      </span> 
     </a> 
     </div> 
    </div> 
    <div id="buttons"> 
     <input type="submit" name="send" value="Confirm"> 
     <input type="reset" name="clear" value="Clear"> 
    </div> 
    </form> 
    <script language="JavaScript"> 
    document.form.user.focus(); 
    </script> 
</div> 
</body> 
</html>

CSS：

#form { padding:0; margin:0 auto; } 
#form label { float:left; padding:0; margin:0 6px 0 6px; font-family:Arial, Helvetica, sans-serif; } 
#form label span { display: block; margin-left:2px; font-size:12px; font-weight: bold; color:#5C5C5C; } 
#form label span.requ { background-image:url(../images/required.png); background-repeat:no-repeat; background-position:right 5px; } 
#form input { border:1px solid #939393; border-radius:6px; font-size:14px; background-color:#F8F8F8; } 
#form input[type="text"] { padding:4px; color:#0067CE; } 
#form input[type="password"] { padding:4px; color:#0067CE; } 
#form input[type="checkbox"] { padding:0; margin-right:2px; position:relative; vertical-align:-2px; cursor:pointer; } 
#form input[type="submit"] { width:100px; height:28px; padding:0; margin:0 5px 0 5px; font-size:15px; font-weight:bold; color:#FFFFFF; border: 1px solid #0062C4; border-radius:6px; background-color:#00A0DD; cursor:pointer; } 
#form input[type="reset"] { width:100px; height:28px; padding:0; margin:0 5px 0 5px; font-size:15px; font-weight:bold; color:#FFFFFF; border: 1px solid #707070; border-radius:6px; background-color:#9F9F9F; cursor:pointer; } 
#form select { padding:3px; color:#0067CE; border:1px solid #939393; border-radius:6px; background-color:#F8F8F8; cursor:pointer; } 
#form textarea { padding:4px; font:normal 14px Arial, Helvetica, sans-serif; color:#0067CE; border:1px solid #939393; border-radius:6px; background-color:#F8F8F8; } 
#form .error { border:1px solid #FF2E13; } 
#form .newrow { display:inline-block; margin:5px 0 5px 0; } 
#form #reqmsg { clear:both; padding-top:16px; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#5C5C5C; text-align:center; } 
#form #buttons { padding:0; margin-top:22px; text-align:center; } 

#body_cont_actv img.help { width:26px; height:26px; border:0px; margin-top:16px; margin-left:4px; } 
#body_cont_actv a.tooltip { outline:none; font:normal 12px Arial, Helvetica, sans-serif; line-height:16px; text-align:justify; color:#5C5C5C; cursor:help; } 
#body_cont_actv a.tooltip span { display:none; width:160px; padding:12px; margin-top:-44px; margin-left:284px; border:1px solid #DCA; border-radius:6px; background:#FFFAF0; } 
#body_cont_actv a.tooltip:hover span { position:absolute; display:inline; } 
#body_cont_actv a.tooltip strong { display:inline-block; margin-bottom:4px; }

謝謝！

來源

2014-02-25 Guybrush

如果你[複製代碼]（http://sixrevisions.com/css/css-only-tooltips/）比ATLEAST做是正確的.. –

對不起不添加源。我得到這個代碼從這裏：http://www.menucool.com/tooltip/css-tooltip – Guybrush

只要你得到它，正確地複製粘貼和調試 –

嘗試使用Mozilla和「WebKit的」 Chrome瀏覽器搜索「MOZ」 ......

也許你可以做一些截圖？

來源

2014-02-25 08:43:07 AdiCrainic

請在行動中看到的代碼：http://jsfiddle.net/73F7w/1/ – Guybrush

我只需要在同一個地方（位置）來顯示工具提示，在Chrome和Firefox。謝謝！ – Guybrush

我無法測試它，因爲我只有Mozzila..But正如我所說，如果你在Chrome和Mozilla不同的結果，你應該使用「MOZ」或「WebKit的」在你的CSS ...這裏是一些信息： http://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit – AdiCrainic

CSS - 位置絕對不同於鉻/歌劇到Firefox/IE

回答

相關問題