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

Question

因此，我继续在我一直在处理的小型潜在客户生成表单上添加了工具提示。一切进行得都很顺利;但是，在 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;}

Answer 1

在 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*/ }

希望它对你有用...