CSS/边距差异 Firefox - Chrome

Question

我正在尝试在图像上添加标题。在 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 - 铬

http://imgur.com/2winrf1 - 火狐

所有图片均为 600 x 150 像素。

Answer 1

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

小提琴：http://jsfiddle.net/J6WUt/2/