jQuery脚本的错误行为

请看一看

有些bug我无法修复

在Safari中，文本在鼠标滑过其他元素时闪烁

在Safari和Chrome中，图像的大小不正确（270x128）-只有在Firefox中才显示正确

在Firefox中，淡出效果并不平滑

CSS代码：

div li img{
    width: 270px;
    height: 128px;
    -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
    -moz-transform:scale(0.8); /*Mozilla scale version*/
    -o-transform:scale(0.8); /*Opera scale version*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/
    opacity: 1; /*initial opacity of images*/
    margin: 0 10px 5px 0; /*margin between images*/
    box-shadow:0px 20px 10px -15px #000;
}

img:hover {
    -webkit-transform:scale(0.85); /*Webkit Scale version*/
    -moz-transform:scale(0.85); /*Mozilla scale version*/
    -o-transform:scale(0.85); /*Opera scale version*/
    box-shadow:0px 0px 30px #000; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px #000; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px #000; /*Mozilla shadow version*/
    opacity: 1;
}

.overlay {
    position: absolute;
    margin-top: -190px;
    height: 200px;
    width: 220px;
    z-index: 9999;
    background-color: red;
    opacity: 0;
}

div li {
    float: left;
    padding: 1px;
    width: 270;
    height: 128px;
}

.darken {
    filter: alpha(opacity=1); /* internet explorer */
    -khtml-opacity: 0.1;      /* khtml, old safari */
    -moz-opacity: 0.1;       /* mozilla, netscape */
    opacity: 0.2;           /* fx, safari, opera */
    -webkit-transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing-function: linear, ease-in, ease-out;
}

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); 
}

div li img{
宽度：270px；
高度：128px；
-webkit变换：缩放（0.8）；/*webkit：将图像缩小到原始大小的0.8倍*/
-moz变换：缩放（0.8）；/*Mozilla缩放版本*/
-o型变换：比例（0.8）；/*歌剧比例版本*/
-webkit转换持续时间：0.5s；/*webkit:动画持续时间*/
-moz转换持续时间：0.5s；/*Mozilla持续时间版本*/
-o-过渡-持续时间：0.5s；/*Opera持续时间版本*/
不透明度：1；/*图像的初始不透明度*/
边距：0 10px 5px 0；/*图像之间的边距*/
盒影：0px20px10px-15px#000；
}
img：悬停{
-webkit转换：缩放（0.85）；/*webkit缩放版本*/
-moz变换：缩放（0.85）；/*Mozilla缩放版本*/
-o变换：比例（0.85）；/*歌剧比例版本*/
框阴影：0px 0px 30px#000；/*CSS3阴影：图像周围30px模糊阴影*/
-webkit盒阴影：0px 0px 30px#000；/*Safari阴影版本*/
-moz盒阴影：0px 0px 30px#000；/*Mozilla阴影版本*/
不透明度：1；
}
.覆盖{
位置：绝对位置；
利润上限：-190px；
高度：200px；
宽度：220px；
z指数：9999；
背景色：红色；
不透明度：0；
}
李迪夫{
浮动：左；
填充：1px；
宽度：270；
高度：128px；
}
.变黑{
过滤器：alpha（不透明度=1）；/*internet explorer*/
-khtml不透明度：0.1；/*khtml，旧狩猎*/
-moz不透明度：0.1；/*mozilla，netscape*/
不透明度：0.2；/*fx、safari、opera*/
-webkit过渡持续时间：0.5s，0.5s；
-webkit过渡计时功能：线性、缓进、缓出；
}
.灰度{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 10+，Android上的Firefox*/
过滤器：灰色；/*IE6-9*/
-webkit过滤器：灰度（100%）；
}

这是我的jQuery代码：

$("#all").on("click", { name: "Alle" }, activateCategory);
$("#eating").on("click", { name: "Essen Trinken" }, activateCategory);
$("#it").on("click", { name: "IT Technik" }, activateCategory);
$("#celebrate").on("click", { name: "Einladen Feiern" }, activateCategory);
$("#education").on("click", { name: "Ausbildung Kultur" }, activateCategory);

function activateCategory(event) {
    if (event.data.name != "Alle") {
        $('li').each(function() {
            //alert("Event: " + event.data.name + "\nTag: " + $(this).data('tags'));
            if ($(this).data('tags') != event.data.name) {
                //alert("treffer in Kategorie " + event.data.name);
                $(this).stop(true,true).addClass("darken",100);
                $(this).append('<div class="overlay"></div>');
            }
            else {
                $(this).stop(true,true).removeClass("darken",100);
                $(this).find('div').remove();
            }
        });
    }
    else {
        $('li').each(function() {
            $(this).removeClass("darken",100);
            $(this).find('div').remove();
        });
    }
}

$（“#全部”）。在（“单击”{name:“Alle”}，activateCategory）；
$（“#吃”）。在（“点击”{name:“Essen Trinken”}，activateCategory）；
$（“#it”）。在（“点击”{name:“it Technik”}，activateCategory）；
$（“#庆祝”）。在（“点击”{name:“Einladen Feiern”}，activateCategory）；
$（“#教育”）。在（“点击”{名称：“澳大利亚文化教育”}上，激活分类）；
功能激活类别（事件）{
if（event.data.name！=“Alle”）{
$（'li'）。每个（函数（）{
//警报（“事件：+Event.data.name+”\n标记：++$（this.data（'tags'））；
if（$（this.data（'tags'）！=event.data.name）{
//警报（“Kategorie中的treffer”+event.data.name）；
$（this）.stop（true，true）.addClass（“变暗”，100）；
$（此）。附加（“”）；
}
否则{
$（this）.stop（true，true）.removeClass（“变暗”，100）；
$（this.find（'div'）.remove（）；
}
});
}
否则{
$（'li'）。每个（函数（）{
$（this.removeClass（“变暗”，100）；
$（this.find（'div'）.remove（）；
});
}
}

有谁能帮我解决这些问题吗？

好的，在这个标签上

<li data-tags="Einladen Feiern"><a href="#"><img class="resizableImage" width="270" height="128" src="img/shots/6.jpg" alt="Illustration"><br></a><p class="description"><a href="#">Feiern</a><br>Beschreibung</p></li>

应该是什么时候

width: 270px;

这方面的完整css是

div li {
   float: left;
   padding: 1px;
   width: 270px;
   height: 128px;
}

---

此外，如果某些内容不流畅，则可能是浏览器的渲染问题，您对此无能为力。

非常感谢。。。这解决了我的问题。你有什么想法吗，为什么safari会在鼠标上方做出“奇怪”的反应？有时我在工作中会遇到一些小问题，比如悬停时的产品盒

不透明度降低，然后向左移动
1px
，然后再回来，真的很烦人，但有时几乎不可能弄清楚为什么不透明度会这样做，但如果我理解正确，移动
1px
不是吗：没有办法弄清楚为什么会发生这种情况或修复它？视情况而定，我只是说有时我会遇到一些我无法解决的小故障
div li {
   float: left;
   padding: 1px;
   width: 270px;
   height: 128px;
}