工具提示中的浏览器兼容性问题

时间:2013-01-12 17:53:59

标签: jquery css

我正在处理工具提示(在输入时显示其中的内容)。它在Chrome上运行良好,但仅在我在Mozilla Firefox上测试之前。工具提示位于Chrome浏览器中文本区域框的底部(这是我想要的),但在Mozilla Firefox中它显示在一些随机位置,但所有文本区域的工具提示显示在相同的随机位置上聚焦文本区域。我知道它是一个CSS问题但仍然附加了所有相关的代码。

CSS

.tooltip
{
    color:#0D776e;
    font-size:15px;
    font-family:calibri;
    min-height:25px;
    border-radius:4px;
    margin:0 0.5%;
    word-wrap:break-word;
    display:none;
    z-index:500;
    width:200px;
    position:absolute;
    top:32px;
}

Jquery的

$(document).ready(function()
{
    $("textarea").focus(function()
    {
        var targetArea = $(this);
        targetArea.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"}).html(targetArea.val());
    });

    $("textarea").blur(function()
    {
        var targetArea = $(this);
        targetArea.siblings('div').fadeOut(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
    });

    $("textarea").keyup(function()
    {
        var targetArea = $(this);
        targetArea.siblings('div').html(targetArea.val());
    });
});

1 个答案:

答案 0 :(得分:1)

如果我在之前的帖子中记得您在TD中使用此内容。 TD将不接受排名,因此请将DIV中的所有内容与position:relative一起打包,以便工具提示可以从DIV

引用它的位置