如何停止移动设备上的边框溢出？

我在页面上使用了轻微的黑客技巧，使得页面之间的对角线边框（因为我找不到使其工作的不同方式），其中包括向“边框”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

如何停止移动设备上的边框溢出？

回答

相关问题