更新 我已经跟踪到 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 转换的性质，但我无法阻止它发生。
您可以通过单击一次然后单击任何导航项在此链接上看到此效果。它应该在第一次单击后收缩和扩展。
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 并在页面加载后应用填充导致用户能够看到此填充添加。