我正在尝试将标题放在图像上。一切都像我想要的Chrome一样，但在Firefox中并不相同。
这是jsfiddle：http://jsfiddle.net/xibalbian/J6WUt/
HTML：
<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>
CSS：
.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);
}
我不明白为什么会这样。另外，我很抱歉杂乱的代码。
以下是我在不同浏览器上的截图：
http://imgur.com/v7f7mmy - Chrome
http://imgur.com/2winrf1 - Firefox
所有图像均为600 x 150像素。