0

ラップトップでレスポンシブ サイトをチェックすると、パーセンテージを使用して適切にスケーリングされますが、iPhone でチェックすると、画像の垂直方向の行に巨大な上部マージンが追加されます。理由はありますか？サイトはこちらhttp://edharrisondesign.com/pocketpictograms/

前もって感謝します！

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%;
}
4

1 に答える 1

0

どこが間違っていたのかはわかりました。上余白を .icon-container クラスではなく .inside-pocket クラスに設定するべきでした。マークアップは次のとおりです。

/* #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-14T22:13:57.777 に答える