iPhone正在为图像添加顶部边距

在我的笔记本电脑上查看我的响应网站时，它使用百分比很好地缩放，但是当我在iPhone上查看时，它为我的垂直行图像添加了一个巨大的顶部边距。任何想法为什么？网站在这里http://edharrisondesign.com/pocketpictograms/iPhone正在为图像添加顶部边距

在此先感谢！

的HTML：

<!-- Pocket 
================================================== --> 

    <figure> 
     <div class="main-pocket"><img src="images/assets/pocket.png"></div> 
     <div class="padding"></div> 
    </figure> 

<!-- Icons 
================================================== --> 

    <div class="inside-pocket"> 
     <div class="icon-container"> 
      <img class="pictogram" src="images/pocket-pics/pencil.png"> 
      <img class="pictogram" src="images/pocket-pics/iphone.png"> 
      <img class="pictogram" src="images/pocket-pics/earphones.png"> 
      <img class="pictogram" src="images/pocket-pics/camera.png"> 
      <img class="pictogram" src="images/pocket-pics/film.png"> 
      <img class="pictogram" src="images/pocket-pics/scalpol.png">  
      <img class="pictogram" src="images/pocket-pics/paintbrush.png"> 
      <img class="pictogram" src="images/pocket-pics/fineliner1.png"> 
      <img class="pictogram" src="images/pocket-pics/fineliner2.png"> 
      <img class="pictogram" src="images/pocket-pics/notepad.png">  
      <img class="pictogram" src="images/pocket-pics/mouse.png"> 
      <img class="pictogram" src="images/pocket-pics/glasses.png">  
      <img class="pictogram" src="images/pocket-pics/lighter.png">  
      <img class="pictogram" src="images/pocket-pics/pipe.png"> 
      <img class="pictogram" src="images/pocket-pics/flask.png"> 
      <img class="pictogram" src="images/pocket-pics/matches.png">  
      <img class="pictogram" src="images/pocket-pics/watch.png"> 
      <img class="pictogram" src="images/pocket-pics/pocket-watch.png"> 
      <img class="pictogram" src="images/pocket-pics/key.png">  
      <img class="pictogram" src="images/pocket-pics/car-key.png">  
     </div>    
    </div>

的CSS：

figure { 
    z-index: 97; 
    position: fixed; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    top: 40%; 
    text-align: center; 
} 

.padding { 
    z-index: 95; 
    position: relative; 
    background-color: #D2D2D2; 
    height: 100%; 
    width: 100%; 
    top: -50px; 
    overflow: hidden; 
    border-bottom: 50px solid #D2D2D2; 
}  

.main-pocket img { 
    z-index: 96; 
    position: relative; 
    width: 30%; 
    height: auto; 
    margin: 0 auto; 
    max-width: 300px; 
} 

.inside-pocket { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin: 0 auto; 
    text-align: center; 
} 

.icon-container { 
    position: relative; 
    max-width: 300px; 
    width: 30%; 
    top: 37%; 
    margin: 0 auto; 
} 

.pictogram { 
    height: auto; 
    width: 100%; 
    margin-bottom: 200%; 
}

来源

2013-03-14 Ed Harrison

好吧，我知道我要去哪里错了 - 我本来应该设置上边距到.inside口袋类，而不是.icon-container类。该标记是在这里：

/* #Pocket 
================================================== */ 
figure { 
z-index: 97; 
position: fixed; 
overflow: hidden; 
width: 100%; 
height: 100%; 
top: 40%; 
text-align: center; 
} 

.padding { 
z-index: 95; 
position: relative; 
background-color: #D2D2D2; 
height: 100%; 
width: 100%; 
top: -50px; 
overflow: hidden; 
border-bottom: 50px solid #D2D2D2; 
}  

.main-pocket img { 
z-index: 96; 
position: relative; 
width: 30%; 
height: auto; 
margin: 0 auto; 
max-width: 300px; 
} 

.inside-pocket { 
width: 100%; 
height: 100%; 
top: 37%; 
position: absolute; 
margin: 0 auto; 
text-align: center; 
} 

.icon-container { 
position: relative; 
max-width: 300px; 
width: 30%; 
margin: 0 auto; 
} 

.pictogram { 
height: auto; 
width: 100%; 
margin-bottom: 200%; 
}

如果有人可以让我知道为什么这是正确的，那就太棒了！欢呼声

来源

2013-03-14 22:13:57

iPhone正在为图像添加顶部边距

回答

相关问题