2016-08-23 13 views
0

EDIT:これはソースHTML内のnbspによって引き起こされたことが判明しました。他の人が同じ問題を解決するのを助けるかもしれないという希望で質問を残しています。JQuery Mobile Gridの動作がローカルとJSBinで異なる

JQuery Mobileのグリッド機能は、ローカルで提供したり、ファイルとして開くときに正しく機能しません。

このメッセージの最後に貼り付けたテストコードは、JSBinで正しく動作します。ブロックは垂直方向のオフセットなしで整列します。 JSBinのリンクと、出力のイメージへのリンクがあります。ローカルファイルサービング

http://jsbin.com/bocubeqaza/1/edit?html,output

https://drive.google.com/file/d/0BxFySp3qjVxxUkgzeUpBME9kcW8/view?usp=sharing

、しかしながら、ブロックの各グループの最も右側の要素に垂直オフセットを生成します。ローカルで表示されたときのコードからの出力へのリンクです(ローカル依存関係はありません)。

https://drive.google.com/open?id=0BxFySp3qjVxxVkZ3czFacTdJOWM

(画像リンクについて申し訳ありませんが、SOのimgurアップローダーでは、Googleドライブのリンクを好きではないと私は、画面のグラブのための別の公共の場所を持っていない)

私は明白なことを試してみましたブラウザのキャッシュをクリアして再起動するようなものです。さらに、誤った行動はデスクトップから提供して携帯電話(Android、Chromeブラウザ)で表示すると再現可能です。それは便利です場合

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" />   

    <title>Sandbox</title> 

    <meta name="viewport" content="width=device-width" initial-scale=1.0> 


    <!-- STYLESHEETS -->  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 

    <!-- Scripts --> 
    <script src="http://code.jquery.com/jquery-2.2.4.js"></script> 
    <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> 
    </head> 
    <body> 

    <div data-role="page" id="sandbox"> 
     <div data-role="content"> 

     <div style="background: grey;">Foo</div> 
     <div class="ui-grid-a"> 
         <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div> 
         <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div> 
     </div><!-- /grid-a --> 
     <div style="background: grey;">Bar</div> 
     <div class="ui-grid-b"> 
         <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div> 
         <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div> 
         <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div> 
     </div><!-- /grid-b --> 
     </div> 


</div> 
    </body> 
</html> 

は、また、私は今朝JQMobileサイトで開かれた問題があります:https://github.com/jquery/jquery-mobile/issues/8501。彼らはすぐに反応しましたが、JSBinでは再現できなかったので、問題は解決しました。

助けてください。ありがとう!

+0

言い換えれば、ui-gridブロックは、JQ Mobileのデモページからそのまま引用されています。 –

答えて

0

恥ずかしくて、これはnbspの文字に起因することが判明しました。 JQ Mobileのデモからグリッドのサンプルを貼り付けたときに彼らが私のコードに入りました。私のエディタはそれらを表示するように構成されていませんでした(今は!)。問題を複雑にすると、JSBinは貼り付けられたHTMLから役立ちます。つまり、コードがローカルではなくその場所で動作した理由を説明します。

関連する問題