在单个页面中使用两个标头时，Chrome v26 中的 jQuery Mobile 标头元素定位不正确

Question

我的 jQuery-Mobile 网站出现布局问题，该问题仅在将 Google Chrome 更新到版本 26 后才开始出现。我页面的基本布局如下：两个窗格，“desktopSideBar”和“desktopContentPane”，每个包含他们自己的标题。

<div data-role="page" data-theme="b" position="fixed">
    <div id="desktopSideBar">
        <div id="mobile_navigation_content">
            <div class="ui-bar-a ui-header" data-position="inline" id="navigationHeader">
                <a class="ui-btn-left" data-icon="back" data-iconpos="notext" data-inline="true" data-mini="true" data-role="button" data-theme="b"></a>
                <h4>First Header</h4>
            </div>
        </div>
    </div>
    <div id="desktopContentPane">
        <div class="ui-bar-a ui-header" data-position="inline" id="contentToolbar">
            <a class="ui-btn-left" data-icon="arrow-l" data-inline="true" data-mini="true" data-role="button" data-theme="b">Hide</a>
            <h4>Second header</h4>
            <a class="ui-btn-right" data-icon="gear" data-iconpos="notext" data-inline="true" data-mini="true" data-role="button" data-theme="b"></a>
        </div>
    </div>
</div>

显然，这种类型的东西并不完全内置于 jQM 框架中，因此我必须添加一些 javascript 代码来正确定位和调整窗格及其标题的大小。

This fiddle shows a simplified version of my page.

问题出在右侧的标题中，标题的标题和最右边的按钮堆叠在其左侧。在 Firefox 或 IE 中打开 fiddle 将显示所需的布局。

奇怪的是，Chrome 似乎仍然知道元素应该在哪里。单击带有齿轮图标的按钮将立即使其向右移动，如果您右键单击标题并选择“检查元素”，则可以通过取消选中并选中某些 css 样式来使整个标题栏自行修复在<div class="ui-header"> 标签上。

我首先要了解的是，Chrome v.26 中可能发生的变化可能会导致这种情况，因为这将帮助我找到问题的根源。

我也不介意有人真的知道问题的根源是什么，因为目前我的解决方法是将其添加到调整大小的代码中：

setTimeout(function () {
    $("#contentToolbar").removeClass("ui-header").find("h4").css("text-align", "left");
    setTimeout(function () {
        $("#contentToolbar").addClass("ui-header").find("h4").css("text-align", "center");
    }, 5);
}, 500);

...当元素重新定位时会导致明显的闪烁。

谢谢！

Answer 1

根据您的 cmets，这里有一个关于 ui-grid 的示例。

注意：在 Chrome 版本 26.0.1410.43 上测试。

Working Demo

<div class="ui-grid-a">
 <div class="ui-block-a">
  <div data-role=header data-theme=b>
   <a href=# data-role=button data-icon=back data-iconpos=notext>g</a>
   <h6>header</h6>
   <a href=# data-role=button data-icon=gear data-iconpos=notext>g</a>
  </div>
  <div data-role=content>contents</div>
</div>

<div class="ui-block-b">
 <div data-role=header data-theme=e>
  <a href=# data-role=button data-icon=arrow-l data-iconpos=notext>g</a>
  <h6>header</h6>
  <a href=# data-role=button data-icon=star data-iconpos=notext>g</a>
 </div>
 <div data-role=content>contents</div>  
 </div>
</div>

CSS

.ui-block-b {
 width: 25% !important;
 height: 100% !important;
}
.ui-block-a {
 width: 75% !important;
 height: 100% !important;
 border-right: solid 1px #ff0000 !important;
}