CSS/HTML工具提示定位在Mozilla Firefox中不起作用

因此，我已經提前並在我一直在研究的小型潛在客戶表單上添加了一個工具提示。一切進行得都很順利;然而，在Mozilla Firefox中，似乎一個元素上的定位功能不正常。在Chrome，Internet Explorer和Safari中進行測試時一切正常。在Firefox中，工具提示並不是放在調用它的圖片上方，而是放在正確的位置。CSS/HTML工具提示定位在Mozilla 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;}

來源

2012-08-12 rmbX66t1

得到了的jsfiddle？ :) – starbeamrainbowlabs 2012-08-12 09:47:21

你使用什麼版本的Firefox？ – yckart 2012-08-13 20:55:53

嘗試在CSS是這樣的：

 

#contact_container { Position:relative; } 

a[data-tooltip] { Position:absolute; top:0px; /* Set Top Position According to your style*/ Left:0px; /* Set LeftPosition According to your style*/ }

希望它能爲你工作...

來源

2012-08-24 05:46:07

CSS/HTML工具提示定位在Mozilla Firefox中不起作用

回答

相關問題