Question

在jQuery Mobile 1.4.5中，访问Panel的演示会在左侧显示下面的图像，但是当我复制代码并在同一浏览器中运行时，我会在右侧显示下面的图像。
请注意页眉和页脚的高度差。

我试图包含my.css并重置html＆amp; body无济于事。我想不出要包含在这里的任何其他信息。

如何解决这个问题？感谢

根据要求，这是来自Google Chrome元素检查面板的CSS：

＆＃13;

.ui-header .ui-title, .ui-footer .ui-title {
    font-size: 1em;
    min-height: 1.1em;
    text-align: center;
    display: block;
    margin: 0 30%;
    padding: .7em 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: 0 !important;
}
user agent stylesheeth1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
Inherited from header.ui-header.ui-bar-inherit.ui-header-fixed.slidedown
.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
    background-color: #e9e9e9 /*{a-bar-background-color}*/;
    border-color: #ddd /*{a-bar-border}*/;
    color: #333 /*{a-bar-color}*/;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #eee /*{a-bar-shadow-color}*/;
    font-weight: bold;
}
Inherited from div.ui-page.ui-page-theme-a.ui-page-header-fixed.ui-page-footer-fixed.ui-page-active
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #f9f9f9 /*{a-page-background-color}*/;
    border-color: #bbb /*{a-page-border}*/;
    color: #333 /*{a-page-color}*/;
    text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}
Inherited from body.ui-mobile-viewport.ui-overlay-a
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #f9f9f9 /*{a-page-background-color}*/;
    border-color: #bbb /*{a-page-border}*/;
    color: #333 /*{a-page-color}*/;
    text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}
body, input, select, textarea, button, .ui-btn {
    font-size: 1em;
    line-height: 1.3;
    font-family: sans-serif /*{global-font-family}*/;
}
Inherited from html.ui-mobile
html {
    font-size: 100%;
}

＆＃13;

以下是产生错误的整个文件，请调整＆＃34; public＆＃34;头标记中的库。

＆＃13;

<!DOCTYPE html>
<html lang="en">

   <head>
     <meta charset="UTF-8">
     <title>RRR</title>
      <!-- <link rel="stylesheet" href="css/default.css"/> -->
      <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
      <script src="js/jquery-1.11.3.js"></script>
      <script src="js/jquery.mobile-1.4.5.js"></script>
   </head>
   
   <body>
<div data-role="page" class="jqm-demos" id="panel-fixed-page1" data-title="Panel fixed positioning" data-url="panel-fixed-page1">
    <div data-role="header" data-position="fixed">
        <h1>Fixed header</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
    </div><!-- /header -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <h1>Panel fixed positioning</h1>
        <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode. The right panel opens as overlay. For both panels we set <code>data-position-fixed="true"</code>. We also set position fixed for the header and footer on this page.</p>
        <p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.</p>
        <div data-demo-html="#panel-fixed-page1"></div><!--/demo-html -->
        <br>
        <br>
        <br>
        <br>
        <br>
        <a href="../" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">Back</a>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p>We made the page a bit longer because you only see the panel fixed positioning if you can scroll the page :-)</p>
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed">
        <h4>Fixed footer</h4>
    </div><!-- /footer -->
    <div data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="b" id="nav-panel">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                <li><a href="#panel-fixed-page2">Accordion</a></li>
                <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
                <li><a href="#panel-fixed-page2">Autocomplete</a></li>
                <li><a href="#panel-fixed-page2">Buttons</a></li>
                <li><a href="#panel-fixed-page2">Checkboxes</a></li>
                <li><a href="#panel-fixed-page2">Collapsibles</a></li>
                <li><a href="#panel-fixed-page2">Controlgroup</a></li>
                <li><a href="#panel-fixed-page2">Dialogs</a></li>
                <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
                <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
                <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
                <li><a href="#panel-fixed-page2">Form elements</a></li>
                <li><a href="#panel-fixed-page2">Grids</a></li>
                <li><a href="#panel-fixed-page2">Header toolbar</a></li>
                <li><a href="#panel-fixed-page2">Icons</a></li>
                <li><a href="#panel-fixed-page2">Links</a></li>
                <li><a href="#panel-fixed-page2">Listviews</a></li>
                <li><a href="#panel-fixed-page2">Loader overlay</a></li>
                <li><a href="#panel-fixed-page2">Navbar</a></li>
                <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
                <li><a href="#panel-fixed-page2">Pages</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">Popup</a></li>
                <li><a href="#panel-fixed-page2">Radio buttons</a></li>
                <li><a href="#panel-fixed-page2">Select</a></li>
                <li><a href="#panel-fixed-page2">Slider, single</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
                <li><a href="#panel-fixed-page2">Transitions</a></li>
        </ul>
    </div><!-- /panel -->
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form">
        <form class="userform">
            <h2>Login</h2>
            <label for="name">Username:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
            <div class="ui-grid-a">
                <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>
    </div><!-- /panel -->
</div>
   </body>

</html>

＆＃13;

Answer 1

页眉和页脚标题css如下

.ui-header .ui-title, .ui-footer .ui-title {
    font-size: 1em;
    min-height: 1.1em;
    text-align: center;
    display: block;
    margin: 0 30%;
    padding: .7em 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: 0!important;
}

填充为padding: .7em 0;

更像padding: 2em 0;

的内容

会得到你的

请检查您的css并确保填充为padding: .7em 0;

<强>更新

我在Q

中没有看到.ui-header .ui-title, .ui-footer .ui-title的css

确保您的鼠标指针直接位于标题标题文本而不是标题本身。你应该看到这样的东西，而不是你在问题中添加的那些其他css代码。你看到了吗，还是遗失了？

作为测试在文档的头部末尾添加以下内容以查看是否有帮助

<HEAD>
...
...
...
<style>
    .ui-header .ui-title, .ui-footer .ui-title {

        padding: .7em 0 !important;

    }
</style>

<HEAD>

jQuery移动面板页眉和页脚高度差

1 个答案: