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正在爲圖像添加頂部邊距

回答

相關問題