Firefox中的工具提示无法正确显示

时间：2011-01-23 16:10:04

标签： javascript jquery html firefox

我最近在我的网站上实现了这些tooltips。他们看起来很棒Chrome和＆amp; Safari，但是在Firefox中，它们显示在页面顶部而不是链接上方。我忘了为Mozilla Firefox设置一个CSS属性吗？工具提示看起来很好，所以我觉得它很小。另外，如果你在他们的网站上看一下Firefox的演示，看起来它可以正常工作。

以下是工具提示的CSS：

div.e-profile_box {
    background: #FFFFDF;
    background-position:100% 0%;
    border:1px none #ccc;
    padding:30px;
    width: 25%;
    float: right;

    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
}

div.e-seeking_box {
    background: #EDEDED;
    background-position:100% 0%;
    border:1px none #ccc;
    padding:5px;
    width: 30.5%;
    float: right;
    text-align: center;
    font-size: medium;
    margin-top: 0px;
}

h1.c-name {
    font-size: 42px;
    color: '#003366';
    margin-bottom: 0px;
}

span.c-url {
    font-size: 12px;
}

span.c-address {
    font-size: 12px;
    color: black;
}

span.c-tax {
    font-size: 16px;
}


h2.e-profile {
    font-size: large;
    text-align: center;
}

p.e-profile {
    font-family: 'Lato';
    font-size: medium;  
    text-align: left;
}

div.c-profile { 
    font-size: 15px;
}

.contact1 {
    background: url(./img/bg_envelope.png) no-repeat 0px 0px;
    height: 280px;
    margin-top: 0px;
    padding:30px;
    width: 25%;
    float: right;
}

div.c-section {
    margin-left: 0;
    width: 65%;
}



/* Profile Data */
.e-dt{
    margin:0px 0px;
    padding:0px;
    list-style-type:none;
}

.e-dth{
    font-size: medium;
    color: black;
}

.e-dth ul li, .e-dtr ul li{
    display:inline-block;
    *display: inline;
    vertical-align:top;
    padding: 0px;
    list-style-type:none!important;
}

.e-col1{
    font-size: 15px;
    width: 50%;
}

.e-col2{
    font-size: 15px;
    width: 50%;
}

.tTip{
    width: 200px;
    cursor: pointer;
}

.tip {
    color: #333;
}

.tip {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 212px;
    height: auto !important;
    padding-top: 37px;
    overflow: hidden;
    display: none;
    *display: inline;
    position: absolute;
    z-index: 500;
    background: transparent url(../img/tipTop.png) no-repeat top;
}

.tipMid {background: transparent url(../img/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
.tipBtm {background: transparent url(../img/tipBtm.png) no-repeat bottom; height: 32px;}

这是我的HTML（现在全部包括在内）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


<html> 
    <head> 
    <!--    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> --> 
        <meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1"> 

        <title></title> 

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo/js/jquery.betterTooltip.js"></script> 

        <script type="text/javascript" src="./js/jquery.dataTables.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.dataTables.ColVis.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.dataTables.FixedHeader.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.dataTables.TableTools.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.colorbox.min.js"></script> 

        <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> 
        <link href="//fonts.googleapis.com/css?family=Tangerine:regular,bold" rel="stylesheet" type="text/css"> 
        <link href="//fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic" rel="stylesheet" type="text/css"> 
        <link href="http://www.datatables.net/release-datatables/media/css/demo_table_jui.css" rel="stylesheet" type="text/css"> 
        <link href="http://www.datatables.net/release-datatables/media/css/demo_table_jui.css" rel="stylesheet" type="text/css"> 
        <link href="http://www.datatables.net/media/css/jui_themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"> 
        <link href="./css/colorbox.css" rel="stylesheet" type="text/css"> 
        <link href="./css/b_style.css" rel="stylesheet" type="text/css"> 


        <!-- INCLUDED PREVIOUSLY --> 
        <script type="text/javascript" src="./includes/js/blockui.js"></script> 
        <link type="text/css" href="./jqalert/confirm.css" rel="stylesheet" media="screen"> 
        <script type="text/javascript" src="./includes/js/ui.core.js"></script> 
        <script type="text/javascript" src="./includes/js/ui.slider.js"></script> 
        <script type="text/javascript" src="./includes/js/ui.draggable.js"></script> 
        <script type="text/javascript" src="./jqalert/jquery.simplemodal.js"></script> 
        <script type="text/javascript" src="./jqalert/jquery.cookies.2.1.0.min.js"></script> 
        <script type="text/javascript" src="./lightbox_popup/thickbox.js"></script> 
        <link rel="stylesheet" href="./lightbox_popup/thickbox.css" type="text/css" media="screen"> 



    <script type="text/javascript"> 
        $(document).ready(function(){
            $('.tTip').betterTooltip({speed: 150, delay: 300});
        });
    </script> 



<script type="text/javascript"> 
    $(document).ready(function(){
        $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
    });//ready
</script> 


<script type="text/javascript"> 
    function closeEmailModal() {
        $(".example8").colorbox.close();

    }//closeEmailModal
</script> 

<script type="text/javascript"> 
    function emailFounder(to) {

        var subj = document.getElementById('email_subj').value;
        var body = document.getElementById('email_body').value;



        $(".example8").colorbox.close();


        //$.post("./ajax/misc/send_email.php", {to: to, from: 'info@website.com', subject: subj, body: body});

    }//emailFounder
</script> 






<script type="text/javascript" charset="UTF-8"> 
/* <![CDATA[ */
try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
xajax.config.requestURI = "/";
xajax.config.statusMessages = false;
xajax.config.waitCursor = true;
xajax.config.version = "xajax 0.5";
xajax.config.legacy = false;
xajax.config.defaultMode = "asynchronous";
xajax.config.defaultMethod = "GET";
/* ]]> */
</script> 
<script type="text/javascript" src="/includes/xajax5/xajax_js/xajax_core.js" charset="UTF-8"></script> 
<script type="text/javascript" charset="UTF-8"> 
/* <![CDATA[ */
window.setTimeout(
 function() {
  var scriptExists = false;
  try { if (xajax.isLoaded) scriptExists = true; }
  catch (e) {}
  if (!scriptExists) {
   alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: /includes/xajax5/xajax_js/xajax_core.js");
  }
 }, 2000);
/* ]]> */
</script> 

<script type="text/javascript"> 
//To show or hide Div.
function showhide(containerId, val) {
    if (val=='show'){ 
            document.getElementById(containerId).style.display="block";
        }
    else
        {
            document.getElementById(containerId).style.display="none";
        }
    }//End of To show or hide Div.



//function to empty the select box options values. 
function remove_selectboxvalues(selectId)
{
 $("#"+selectId).children().remove();
 }//End of function to empty the select box options values. 

//javascript function to add an option to a select box
function addOption(selectId, optionId, txt, val)
{
var objOption = new Option(txt, val);
objOption.id = optionId;
document.getElementById(selectId).options.add(objOption);
}//End of javascript function to add an option to a select box.



//function to save the search vales and display in select box.
function load_search_form(div_name, type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
xajax.$('search_form').innerHTML = objOption;
}//End of function to save the search vales and display in select box.
//function to load_body_table.
function load_body_table(div_name,page,sort_type,sort_order,type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
if(type =='company'){
xajax.$('body_content').innerHTML = objOption;
}else{
xajax.$('body_content').innerHTML = objOption;
}
}//End of function load_body_table.

function set_watchlist(div_name,todiv,type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
xajax.$('body_content').innerHTML = objOption;;
}//End of function set_watchlist.
function set_single_star_watchlist(id,todiv,type)
{
var objOption = new Option(todiv, todiv);
objOption.id = optionId;
xajax.$(todiv).innerHTML = objOption;;
}//End of function set_watchlist.
function set_single_star_fev(id,todiv,type)
{
var objOption = new Option(todiv, todiv);
objOption.id = optionId;
xajax.$(todiv).innerHTML = objOption;;
}//End of function set_single_star_fev.
function remove_single_star_fev(id,todiv,type)
{
var objOption = new Option(todiv, todiv);
objOption.id = optionId;
xajax.$(todiv).innerHTML = objOption;;
}//End of function set_single_star_fev.
function set_blacklist(div_name,todiv,type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
xajax.$('body_content').innerHTML = objOption;;
}//End of function set_blacklist.
function setupCallback()
{
xajax.callback.global.onComplete = function()
{
alert('In global.onComplete');
};
}

        </script> 
<script type="text/javascript"> 
<!-- Begin
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
{
chk[i].checked = true ;}
}

function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++){
chk[i].checked = false ;}
}
// End -->
function check_loginLB(){
        if(document.getElementById('usernameLB').value == "" ||(trim(document.getElementById('usernameLB').value).length == 0) || (document.getElementById('usernameLB').value.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/) == -1)){
            alert("Please Enter Your email id properly");
            document.getElementById('usernameLB').focus();
            return false;
        }
        if(document.getElementById('passwordLB').value == "" ){
            alert("Please Enter password ");
            document.getElementById('passwordLB').focus();
            return false;
        }
        document.getElementById('login_btn').focus();
        document.user_login_frm.submit();
    }

    function show_forgot_div(){
        document.getElementById('forgot_pass_div').style.display = "";
        document.getElementById('login_div').style.display = "none";
    }
    function show_login(){
        document.getElementById('login_div').style.display = "";
        document.getElementById('forgot_pass_div').style.display = "none";
    }
    function focus_search(){
        document.getElementById('home_pg_search').select();
        document.getElementById('home_pg_search').focus();
    }
    function DoNav(theUrl)
  {
  document.location.href = theUrl;
  }
     function more_less(div1, div2) {
      document.getElementById(div1).style.display="block";
      document.getElementById(div2).style.display="none";
    }

</script> 

<script type="text/javascript"> 
    function emailEntrepreneur() {
        alert("Emailing Entrepreneur Through Modal Form");

    }//emailEntrepreneur
</script> 


<base href="website"> 
<link href="./css/general.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 
<div id="wrapper"> 
   <div id="header"> 
    <div id="logo"><a href="index.php"><img src="/images/cbi_logo.png" alt="CBI Logo" style="width: 280; height: 54; border: none;"/></a></div> 
  <div id="header_search"> 
      <form id="frm_hdr_search" name="frm_hdr_search" method="post" action="company_search.php"> 
        <table style="width=280; border=0; align=center; cellpadding=1; cellspacing=0;"> 
          <tr> 
            <td colspan="4" class="txt12"><strong>Search</strong></td> 
          </tr> 
          <tr> 
            <td colspan="3"><input name="search" type="text" class="inpt" id="search"></td> 
            <td style="width=53;"><a href="javascript:;" onclick="document.frm_hdr_search.submit()">Search</a></td> 
          </tr> 
          <tr> 
            <td width="84" valign="middle"><input type="radio" name="serch_type" id="radio" value="startup" checked="checked"/> 
              Companies</td> 
            <td width="72" valign="middle"><input type="radio" name="serch_type" id="radio2" value="investor"/>Investors</td> 
            <td width="63" valign="middle"><input type="radio" name="serch_type" id="radio3" value="deal"/>Deals</td> 
            <td width="53" valign="middle">&nbsp;</td> 
          </tr> 
        </table> 
      </form> 
  </div> 
        <div id="hdr_user"> 
   <div id="feedback"></div> 
    <span class="txt13">FName&nbsp;LName</span> <span class="txt16">|</span> <span class="txt13"> 
    <a href="user_logout.php?url=website/account.php">LOGOUT</a></span><br/> 
      <a href="user_logout.php?url=website/account.php">Click here if this is not you</a></div> 
        <div class="clr"></div> 
</div> 
  <div id="topnav"> 
    <ul> 
            <li><a href="company_search.php">Company Search</a></li> 
      <li><a href="investors_search.php" style="width:158px;">Investor Search</a></li> 
      <li><a href="deal_search.php">Deal Search</a></li> 
      <li><a href="dealflow.php">DealFlow</a></li> 
      <li><a href="analytics_trends.php">Analytics</a></li> 
      <li class='selected'><a href="fre.php">FRE Results</a></li> 
    </ul> 
  </div> 

    <div> 
        <div><h1 class='c-name'>Goals</h1><span class='c-url'><a href='http://www.goals.com' target='_blank'>http://www.goals.com</a><br/><span class='c-address'>San Diego, CA</span><div class='e-seeking_box'>Seeking:<br/><b>$500k to $1 million</b><br/></div><br/><br/><br/><a class='example8' href='website/fre_profile.php#'>Email the Founder</a></div><hr><span class='c-tax'>Internet&nbsp;&nbsp;|&nbsp&nbsp;Internet Software & Services&nbsp;&nbsp;|&nbsp;&nbsp;Personal & Professional Development</span><br/><br/><div class='e-profile_box'><h2 class='e-profile'>About the Founder</h2><hr><p class='e-profile'><b>Name:</b>&nbsp;&nbsp;Josh&nbsp;Smith<br/><br/><b>Role:</b>&nbsp;&nbsp;CEO / Owner / Founder<br/><br/><b>Education:</b>&nbsp;&nbsp;Bachelor's degree<br/><br/><b>Work Experience:</b>&nbsp;&nbsp;Less than 1 year<br/><br/><b>Entrepreneurial Experience:</b>&nbsp;&nbsp;Less than 1 year<br/><br/><br/><a class='example8' href='website/fre_profile.php#'><img src='http://website/img/email_icon.png' alt='email icon' height='25' width='25' style='text-align: center; border: none;'>&nbsp;Email the Founder</a></p></div><div class='c-profile'><h3>Description</h3><div class='c-section'><hr>Goals helps you dream big and make it happen.  You can also discover new things to do in life and new places to go. When you share your dreams and goals, we give you recommendations for similar dreams and goals along with potential obstacles and advice for overcoming them. We'll also suggest relevant questions, interests, places, and friends who share your goals. Goals aims to be the one place you go to make your life measurably better.</div><div class='tool_text'><br/><h3>Other Info</h3><div id='other_info' class='c-section'><hr><ul class='e-dt'><li class='e-dth'><ul><li class='e-col1'>Agent (<small>what's <a class='tTip' href='#' title='Agents help identify promising deal-flow that is on Website.  They include lawyers, accountants, and others engaged with promising companies.'>this?</a></small>)</li>Agent from Website</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Prior Funding Recieved</li><li class='e-col2'>No</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Stage</li><li class='e-col2'>Built the product / Have prototype</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Employees</li><li class='e-col2'>1 to 4</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Revenue</li><li class='e-col2'>Zero revenue</li><br/><li class='e-col1'></li><li class='e-col2'></li></ul></li></div></div>      
                            <div style='display: none;'> 
                                <div id='inline_example1' style='padding:10px; background:#fff;'> 
                                    <h3>Email Josh Smith</h3> 
                                    <big><p>Use this form to contact the founder of Goals by email.  We will send a copy to your Website email address and also provide the entrepreneur's email address for future correspondence.</p></big> 

                                    <label for="email_subj">Subject:&nbsp;&nbsp;</label><br/><input id="email_subj" type="text" size="88"/><br/><br/> 
                                    <label for="email_body">Body:&nbsp;&nbsp;</label><br/><textarea id="email_body" cols="76" rows="10"> 







Regards,
FName&nbsp;LName
Company</textarea><br/><br/> 
                                    <button value="email@gmail.com" onclick="emailFounder(this.value);">Send</button>&nbsp;&nbsp;<button onclick="closeEmailModal();">Cancel</button> 
                                </div> 
                            </div> 
                        </div><br/><br/><br/><br/> 



    <br/><br/><br/><br/><br/><br/>  
    <div id="footer"> 
  <div class="footer_bkg"> 
    <div class="container"> 
      <div class="spanfull last"> 
        <div id="fnav"><a href="about.php" class="navbdr">About Website</a> <a href="tour.php" class="navbdr">Tour</a> <a href="website/blog" class="navbdr">Blog</a>  <a href="user_logout.php">Log Out</a> <a href="account.php" class="login">My Account</a>        <span class="copy" style="text-align:right">&copy; CB Information Services, 2010</span></div> 

      </div> 
    </div> 
  </div> 
</div> 

        </div> 
    </div> 





    </body> 
</html>

2 个答案:

答案 0 :(得分：1)

这不是答案，而是建议，

所以我不确定你是否只是为了演示目的这样做，但是如果没有：

您要在其中加载JS个文件的数量，最好将它们加载到HTML文件的底部而不是标题中。 通过这种方式，浏览器可以继续呈现内容，并且用户可以在加载所有内容时看到正在发生的事情。

另外，我会将你所拥有的所有JavaScript代码都放在他们自己的文件中，命名它并将其加载到底部。

答案 1 :(得分：1)

暂时想出来，但忘了发帖。问题出在betterTooltip.js文件中，默认动画由于某种原因导致FireFox出现问题。以下是我的所作所为：

tip.css({'top': '+=35', 'left': '-=10' }).fadeIn('fast');  //custom -> browser compatible
//tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed); //default
相关问题
最新问题