如何停止移動設備上的邊框溢出？

我在頁面上使用了輕微的黑客技巧，使得頁面之間的對角線邊框（因爲我找不到使其工作的不同方式），其中包括向「邊框」div添加超厚邊框。在計算機上，但在手機上（我測試過的所有手機上），沒有任何問題，只要看到邊框伸出來，就可以橫向滾動到頁面上的「空白區域」。有誰知道如何制止這種情況，或者建議採用不同的方式來創建對角線？如何停止移動設備上的邊框溢出？

頁面響應並填充瀏覽器窗口，這就是爲什麼我需要一個巨大的邊框大小，以確保它會在那裏甚至在高清顯示器...

.border-black-white { 
    border-color: transparent transparent #fff #2d2d2d ; 
    border-width: 0 0 60px 2600px; 
    border-style: solid; 
} 
.border-yellow-white { 
    border-color: transparent transparent #fff transparent ; 
    border-width: 0 0 60px 2600px; 
    border-style: solid; 
} 
section { 
    width: 80%; 
    margin: 0 auto; 
    padding: 3em 10%; 
}

這裏是所有小提琴代碼：http://jsfiddle.net/UnX72/

謝謝！

更新：我已經嘗試溢出：隱藏（或溢出x：隱藏），它沒有工作。

來源

2014-03-25 b4rbika

查看我的答案[here]（http://stackoverflow.com/a/17756714/2049063）禁用頁面上的水平滾動 –

我試過在發佈問題之前，它不起作用 - 對於某些原因手機瀏覽器讓你隨意滑動滾動:( – b4rbika

它也在桌面瀏覽器上溢出 – Zagen

嗯，我認爲不可能隱藏由邊界創建的溢出，即使在桌面瀏覽器上，或者至少不是在我安裝的任何一箇中，我已經嘗試了一種類似的方法來測試這個得到了同樣的問題，所以我認爲最好不要使用邊框，所以我創建了一個div並放置了另一個（使用僞元素）並旋轉以獲得相同的效果，所以我的猜測是，這應該只是工作爲了你想要的東西，如果沒有，至少我希望它給你另一種選擇。

Here is the jsfiddle Demo

的Html

<section> 
    <div> 
     <p> Section 1</p> 
    </div> 
</section> 
<div class="diagonal"> 

</div> 
<section> 
    <div> 
     <p> Section 2</p> 
    </div> 
</section> 
<div class="diagonal"></div> 
<section> 
    <div> 
     <p> Section 3</p> 
    </div> 
</section> 
<div class="diagonal"></div>

的CSS

section { 
    width: 80%; 
    margin: 0 auto; 
    padding: 3em 10%; 
    background: red; 
    overflow:hidden; 
} 
.diagonal{ 
    width: 100%; 
    height: 50px; 
    overflow: hidden; 
    position: relative; 
} 
.diagonal:after{ 
    content: ''; 
    height: 40px; 
    background: black; 
    display: block; 
    position: absolute; 
    top: -39px; 
    left: -5px; 
    width: 200%; 
    transform: rotate(7deg); 
    -ms-transform: rotate(7deg); 
    -webkit-transform: rotate(-2deg); 
}

在這裏，您可以檢查旋轉屬性的兼容性

http://caniuse.com/transforms2d

注：根據容器「對角線」將需要offseted到正確位置的大小，你可以這樣做，利用媒體查詢，或javascript。

來源

2014-03-26 03:22:24 Zagen

謝謝先生 - 這有解決了它！我原本試圖用變換來完成它，但是我找到的教程並不是很好，這就是爲什麼我訴諸邊境的原因。乾杯！ – b4rbika

很高興它工作，祝你的項目好運=） – Zagen

如何停止移動設備上的邊框溢出？

回答

相關問題