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

希望它对你有用......

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

1 个答案: