奇怪的圖像行爲

我在不同的設備上有一些奇怪的圖像行爲。奇怪的圖像行爲

我一直在1920 x 1080的PC，1440 x 900的Mac和1920x1080的iPhone上測試網站。

他們都看起來很好。

但是，當問別人測試它。他們在他們的結局中獲得了截然不同的行爲。

下面是它應該是這樣的：

「圖形」（設備和窗口）位置靠近屏幕的頂部。

但是這是它看起來像在iPad上：

，圖形圖像，由於某種原因被顯示確實遠了網頁上。

有使用Firefox同樣的問題在Linux上

我沒有帶做過任何HTML來定位它。下面是相關的代碼：

<header> 
    <div class="header-content"> 
     <div class="header-content-inner"> 
      <img src="/img/graphic.png" class="img-graphic"> 
      <!-- <h1>Experience new technological breakthroughs in the field of investing</h1> 
      <hr> --> 
      <p style="padding-top: 10px">What if it was possible to identify some of the next years' winners in the markets today with an 83%, 90%, or 95% average success rate?<sup>*</sup></p> 
      <a id="read_more" href="#formula-stocks" class="btn btn-primary btn-xl page-scroll" style="opacity: 1!important">Would you be interested?</a> 
      <a id="signup-a-btn" href="/register" class="btn btn-primary btn-xl">Sign Up for Free</a> 
      <br /><sub><small>(*) Based on averages of cumulatively 9,800 recommendations.</small></sub> 
     </div> 
    </div> 
</header>

而這裏的它的相關CSS：

header { 
    position: relative; 
    width: 100%; 
    min-height: auto; 
    text-align: center; 
    color: #FAFAFA; 
    background-image: url("../img/header-2.jpg"); 
    background-position: bottom; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover 
} 

.img-graphic { 
    max-width: 100%; 
    text-align: center 
} 
header .header-content { 
    position: relative; 
    width: 100%; 
    padding: 100px 15px; 
    text-align: center 
}

我沒有什麼，我可以看到，會導致圖像從頂部太遠，在某些設備上？

「圖形」本身就是這樣的：

它確實有上側一些空間。但是沒有超過它，這應該導致我的知識這種行爲。

我在我的代碼中有一些@media，如果這與它有任何關係。

@media (min-width: 768px) { 
    header { 
     min-height: 100% 
    } 
    header .header-content { 
     position: absolute; 
     top: 50%; 
     padding: 0 50px; 
     transform: translateY(-50%) 
    } 
    header .header-content .header-content-inner { 
     margin-right: auto; 
     margin-left: auto; 
     max-width: 1000px 
    } 
}

任何幫助搞清楚如何解決這個奇怪的行爲在Linux/Ipad，將不勝感激！

謝謝！

來源

2015-09-12 Mark L

這將是你的home.min.css，線1009和1011，用（不相關的代碼刪除）：

@media (min-width: 768px) { 
    header .header-content { 
     top: 50%; 
     transform: translateY(-50%); 
    } 
}

由於iOS的8.4，Mobile Safari doesn't support transform，只有-webkit-transform。
行

-webkit-transform: translateY(-50%);

添加到選擇，你應該是好去。

來源

2015-09-12 15:45:04 Siguza

謝謝！這似乎已經解決了Linux和iOS設備。 –

奇怪的圖像行爲

回答

相關問題