【发布时间】：2013-09-11 07:29:39
【问题描述】：
更新 我已将错误跟踪到 pageBeforeHide 和 pageBeforeShow 事件之间。在这些事件之间，添加和删除类 .ui-overlay-c。这些 CSS 类显示在这里：
.ui-body-c,
.ui-overlay-c {
border: 1px solid #aaa /*{c-body-border}*/;
color: #333 /*{c-body-color}*/;
text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
background: #f9f9f9 /*{c-body-background-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{c-body-background-start}*/), to( #eee /*{c-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/);
}
.ui-overlay-c {
background-image: none;
border-width: 0;
}
/更新
我正在开发一个触摸屏网站并使用 jQueryMobile 库。该网站的设计尺寸为 1366 像素 x 768 像素，但不能更小。
大多数东西都可以跨浏览器运行，但我遇到了一个在转换过程中出现的讨厌的错误。页面设计为 99.55% 宽度，所有边缘都有纯白色 10 像素边框。在过渡期间，页面会收缩大约 40 像素（仅从右侧开始），然后当它加载新页面时，该页面也会收缩，直到扩展以填充适当的宽度。
我猜这是由于 jQueryMobile 转换的性质，但我无法阻止它发生。
您可以在这里at this link 看到这种效果，只需单击一次，然后单击任何导航项。它应该在第一次点击后收缩和扩展。
jQM 的工作方式，有一个使用以下 css 的移动视口包装器：
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display:none;
border: 0;
在页面之间的过渡期间，沿移动视口包装器应用以下样式：
width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
在此视口内有单独的页面（.ui-page），每个页面都有以下 css：
top: 0;
left: 0;
min-height: 100%;
position: absolute;
display: none; // overridden to display:block when the page is loaded
border: 0;
padding: 0;
margin: 0;
这是我在页面级别与 .ui-page 一起应用的自定义样式：
color: black !important;
background-image: none !important;
background-color: #ddd2cc !important;
border: 10px solid white !important;
padding: 20px !important;
width: 95.55% !important;
我对 jQueryMobile CSS 内部结构的了解有限，但任何有关如何阻止页面扩展/收缩的指导都会有所帮助。我的直觉告诉我，问题是由于我的 css 覆盖了 jQM css 并在页面加载后应用填充导致用户能够看到此填充添加。
【问题讨论】：
-
有接受者吗？真的可以使用帮助。
-
那么，如果您删除自定义 CSS，一切正常吗？您可以做的是在过渡结束后显示页面时添加您的自定义 CSS，并在页面隐藏和过渡开始之前删除您的 CSS。
-
它们也可以与自定义 CSS 一起正常工作@Omar，核心问题是即使在页面加载之后（所有内容都已布局并在页面上），也不会应用填充。它在一切都完成后应用，用户能够看到它正在发生并且看起来很草率。我希望通过在用户可以看到它并加载页面之前在适当的时间应用填充来避免这种看起来有问题的过渡过程。
-
我查看了您的页面。我猜你可能需要在
pagebeforeshow事件上添加类并在pagehide上删除它们。尝试自定义类的.addClass()和.removeClass()。 -
@Tip_Top 它不应该在移动设备上工作，只是一个没有多点触控的老式触摸屏
标签： html css jquery-mobile