覆盖iOS上的overflow-x CSS属性 [英] Overriding overflow-x CSS property on iOS
问题描述
我们有一个移动网络应用程序的基本样式表，其中我们有html和body设置为overflow-x：hidden以防止任何水平滚动。
We have a base style sheet for a mobile web app where we have html and body set to overflow-x:hidden to prevent any horizontal scrolling.
1页，我们有一个iframe打开外部网站，其中一些不一定是移动优化，所以我们要允许水平滚动。
However on 1 page, we have an iframe that opens external sites, some of which are not necessarily mobile optimized, so we want to allow horizontal scrolling.
我想我可以覆盖overflow-x：hidden，with overflow-x：auto！important，但它不工作。我唯一可以使它工作的方法是删除overflow-x的所有概念，滚动工作正常。
I thought I could just override the overflow-x:hidden, with overflow-x:auto !important, but it doesn't work. The only way I can make it work is remove all notion of overflow-x, and the scrolling works fine. It also works as expected in Safari + Chrome.
任何想法？
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style>
/* Styles from existing style sheet */
html, body {
position:relative;
height:100%;
width:100%;
padding:0;
margin:0;
overflow-x:hidden;
}
/* Overrides */
html, body{
width:auto !important;
height:auto !important;
overflow-x:auto !important;
}
</style>
</head>
<body>
<iframe src="http://starbucks.com"></iframe>
</body>
</html>
推荐答案
尝试 overflow-x： visible; 改为？我也不相信！重要是必要的。
Tried overflow-x: visible; instead? Also I don't believe the !importants are necessary.
这篇关于覆盖iOS上的overflow-x CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
