Javascript 我的jQuery效果的像素和浏览器有点问题_Javascript_Jquery_Css_Xhtml

Javascript 我的jQuery效果的像素和浏览器有点问题

javascript jquery css

Javascript 我的jQuery效果的像素和浏览器有点问题,javascript,jquery,css,xhtml,Javascript,Jquery,Css,Xhtml,为了突出显示某个p元素，我编写了一些JS，使它出现在黑暗的背景之上为了做到这一点，我使用jQuery创建了一个覆盖，然后克隆了informationp元素并将其绝对定位在覆盖上因为它删除了一些CSS属性（由于页面中的新位置而没有被继承），所以我使用jQuery添加它们它几乎可以完美地工作。在我的Mac OS X上的Firefox 3.5.6中，当它淡出时，会有一点像素的不光彩。我知道这是吹毛求疵，但我希望它消失，最终用户不知道其中的区别可在以下位置进行测试：这里还有jQuery函数 v

为了突出显示某个p元素，我编写了一些JS，使它出现在黑暗的背景之上

为了做到这一点，我使用jQuery创建了一个覆盖，然后克隆了informationp元素并将其绝对定位在覆盖上

因为它删除了一些CSS属性（由于页面中的新位置而没有被继承），所以我使用jQuery添加它们

它几乎可以完美地工作。在我的Mac OS X上的Firefox 3.5.6中，当它淡出时，会有一点像素的不光彩。我知道这是吹毛求疵，但我希望它消失，最终用户不知道其中的区别

可在以下位置进行测试：

这里还有jQuery函数

var highlightFormSuccess = function() {

    var fadeTo = 0.6;

    var $info = $('p.information');

    if ($info.length) {


        // make overlay

        var $overlay = $('<div />')
            .css({
                display: 'none',
                width: '100%',
                height: $(document).height(),
                position: 'absolute',
                top: 0,
                left: 0,
                zIndex: 32767,
                opacity: 0
            })
            .attr({
                id: 'overlay'
            })
            .appendTo('body');

        // pull out success block and position above overlay

        var left = $info.position().left,
            top = $info.position().top,
            fontSize = $info.css('font-size'),
            width = $info.width(),
            color = $info.css('color'),
            lineHeight = $info.css('line-height');


        var $newInfo = $info.clone()
                            .css({
                                position: 'absolute',
                                top: top,
                                left: left,
                                'font-size': fontSize,
                                'line-height': lineHeight,
                                width: width,
                                color: color,
                                zIndex: 32767
                            })
                            .appendTo('body');

        $overlay
        .show()
        .fadeTo(1000, fadeTo);
        // wait then fade back out
        setTimeout(function() {

            $($overlay, $newInfo).fadeOut(1000, function() {
                $newInfo.fadeOut(250, function() { $(this).remove(); } );
            });

        }, 2500);


    };


};

var highlightFormSuccess=function（）{
var fadeTo=0.6；
var$info=$（'p.information'）；
如果（$info.length）{
//覆盖
变量$overlay=$（''）
.css({
显示：“无”，
宽度：“100%”，
高度：$（文档）.height（），
位置：'绝对'，
排名：0，
左:0,，
zIndex:32767，
不透明度：0
})
艾特先生({
id:'覆盖'
})
.附于（“主体”）；
//拉出成功块并放置在覆盖层上方
var left=$info.position（）.left，
top=$info.position（）.top，
fontSize=$info.css（'font-size'），
宽度=$info.width（），
颜色=$info.css（'color'），
lineHeight=$info.css（'line-height'）；
var$newInfo=$info.clone（）
.css({
位置：'绝对'，
顶:顶,，
左:左,，
“字体大小”：字体大小，
“线宽”：线宽，
宽度：宽度，
颜色：颜色，
zIndex:32767
})
.附于（“主体”）；
$overlay
.show（）
.fadeTo（1000，fadeTo）；
//等待然后淡出
setTimeout（函数（）{
$（$overlay，$newInfo）.fadeOut（1000，function（）{
$newInfo.fadeOut（250，function（）{$（this.remove（）；}）；
});
}, 2500);
};
};

也许你可以让事情变得简单一点。我只是通过将我的段落规则设置为：

p.highlight {
  position:relative;
  background-color:#ffffff;
  z-index:10;
}

和我的覆盖到：

div.overlay {
  position:fixed;
  background-color:#000000;
  z-index:5; // lower than my paragraph, higher than all else
  top:0; left:0; width:100%; height:100%;
}


我是一个段落
我也是一个段落

你能不能把它的位置设置成相对的，并给它一个比你的暗色物品更高的

z-index

？我同意乔纳森的看法。似乎这是某种css问题。在Safari中也会发生同样的事情，但效果有点不同，只是为了让你更讨厌@乔纳森·桑普森：我从没想过！让我试试。如果它有效的话，你最好把它作为一个答案贴出来，这样我就可以接受了！我刚刚在圣诞节休息两周后回到办公室-请原谅我的愚蠢！非常感谢这个。。。休息两周后我就不编码了呵呵。

<body>
  <div class="overlay"></div>
  <p>I'm a paragraph.</p>
  <p class="highlight">I too am a paragraph.</p>
</body>