【发布时间】：2018-10-31 18:19:30
【问题描述】：
我最近在我的网站上实现了这些tooltips。它们在 Chrome 和 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"> </td>
</tr>
</table>
</form>
</div>
<div id="hdr_user">
<div id="feedback"></div>
<span class="txt13">FName 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 |  Internet Software & Services | 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> Josh Smith<br/><br/><b>Role:</b> CEO / Owner / Founder<br/><br/><b>Education:</b> Bachelor's degree<br/><br/><b>Work Experience:</b> Less than 1 year<br/><br/><b>Entrepreneurial Experience:</b> 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;'> 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: </label><br/><input id="email_subj" type="text" size="88"/><br/><br/>
<label for="email_body">Body: </label><br/><textarea id="email_body" cols="76" rows="10">
Regards,
FName LName
Company</textarea><br/><br/>
<button value="email@gmail.com" onclick="emailFounder(this.value);">Send</button> <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">© CB Information Services, 2010</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
提供一个完整的、最小的测试用例。仅仅向我们保证
<div>在现实生活中是关闭的是不够的。我们不能保证您所犯的错误不在您忽略向我们展示的代码中。 -
即使您的 HTML 是一个 sn-p，在工具提示之后也有两个关闭
</li>。如果这不是问题，那么请分享一个演示，也许在 jsFiddle.com 上，因为我想看看你正在使用的脚本。 -
我感觉这是 jquery/javascript 的问题，或者是您忽略向我们展示的其他问题
-
我现在已经包含了我应该开始的所有代码。我很抱歉，一方面是懒惰，另一方面是匆忙。让我知道是否需要其他任何东西。谢谢。
-
尝试添加位置：相对；到 .tTip 。如果这没有帮助，也许明确设置 .tip 类的顶部和左侧位置。不过，你有很多不同的脚本和东西：|
标签： javascript jquery html firefox