2

Google Chrome をバージョン 26 に更新した後に発生し始めた jQuery-Mobile サイトでレイアウトの問題が発生しています。ページの基本的なレイアウトは次のとおりです。ヘッダ。

<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 コードを追加する必要がありました。

このフィドルは、私のページの簡略化されたバージョンを示しています。

問題はヘッダーの右側にあり、ヘッダーのタイトルと一番右のボタンが左側に積み上げられています。Firefox または IE でフィドルを開くと、目的のレイアウトが表示されます。

奇妙なことに、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);

...要素が再配置されると、顕著なちらつきが発生します。

ありがとう！

4

1 に答える 1

1

コメントに基づいて、ui-grid の例を次に示します。

注: Chrome バージョン 26.0.1410.43 でテスト済みです。

ワーキングデモ

<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;
}
于 2013-04-04T16:30:46.590 に答える