Html CSS/页边距差异Firefox-Chrome

我想在图片上加上标题。在Chrome中，一切都和我想要的一样，但在Firefox中却不一样

以下是JSFIDLE：

HTML:

我不明白为什么会这样。我也很抱歉代码混乱

以下是我在不同浏览器上的屏幕截图：

-铬

-Firefox

---

所有图像都是600 x 150px。

使用

top

和

left

属性来定位绝对元素，而不是使用边距。这就是他们的目的

---

Fiddle:

你能在中重现这个问题吗？我在那里放了相同的代码，但我不知道如何上传图像等。看起来很混乱，然后使用虚拟图像或上传后使用绝对链接。如果你不能测试，就很难发现问题。如果没有所有的信息，就很难确定问题。你能告诉我们其中一张图片的大小吗？600x150还编辑了信息。我正在尝试将一些假人放到JSFIDLE上。我尝试过，但在firefox上仍然得到相同的结果。。。无论是否有此代码，chrome上的一切都非常完美。600x150所有这些。我正在准备提琴。更新的回复，这应该在chrome和firefox中输出相同的结果。我尝试了，但没有得到这些结果。现在一切都好了，谢谢！

<div class="poster-wrapper">
     <ul class="poster-ul">
         <li><a href="jin.html" class="poster-a"><img src="images/jin2.png" alt="" class="poster-img"><span class="title1">Jin</span></a></li>
         <li><a href="guzel.html"><img src="images/guzel-gunler-fino.png" alt="" class="poster-img"><span class="title2">Guzel Gunler Gorecegiz</span></a></li>
         <li><a href="araf.html"><img src="images/araf-fino.png" alt="" class="poster-img"><span class="title3">Araf</span></a></li>
         <li><a href="sen.html"><img src="images/sen-fino.png" alt="" class="poster-img"><span class="title4">Sen Aydinlatirsin Geceyi</span></a></li>
         <li><a href="zenne.html"><img src="images/zenne-fino.png" alt="" class="poster-img"><span class="title5">Zenne</span></a></li>
         <li><a href="kuma.html"><img src="images/kuma-fino.png" alt="" class="poster-img"><span class="title6">Kuma</span></a></li>
         <li><a href="hayat.html"><img src="images/hayat-boyu-fino.png" alt="" class="poster-img"><span class="title7">Hayat Boyu</span></a></li>
     </ul>
        </div>

.poster-wrapper {
padding:0;
margin-top:18%;
margin-left:20%;
position:absolute;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
}

.poster-ul {
padding:0;
display:block;
list-style-type:none;
text-decoration:none;
}

.title1 {
position:absolute;
margin-top:-16%;
margin-left:55%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
z-index:10000;
}

.title2 {
position:absolute;
margin-top:-20%;
margin-left:20%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title3 {
position:absolute;
margin-top:-18%;
margin-left:55%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title4 {
position:absolute;
margin-top:-20%;
margin-left:20%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title5 {
position:absolute;
margin-top:-19%;
margin-left:50%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title6 {
position:absolute;
margin-top:-20%;
margin-left:50%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title7 {
position:absolute;
margin-top:-20%;
margin-left:45%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}