1

私は scaleraphael http://www.shapevent.com/scaleraphael/を使用しています。これにより、ユーザーがブラウザーのサイズを変更したときに svg/VML のサイズを変更できます (流動レイアウト - 上の div と同じサイズにスケーリングするようにしました)。ページ）。

SVG ブラウザーで完全に動作し、IE8/7/6 (VML) でも動作しますが、奇妙な理由で右側にギャップがあります。VML グループの coordsize に関連するものだと思いますが、これは少し推測です。

ギャップは、特定のブラウザ幅 (約 40 ピクセル離れた場所) でのみ表示されます。例: ブラウザーの幅: 1060、1104、1144、1186、1230。ギャップは最大で約 20 ピクセルであり、ブラウザーの幅がシーケンスの次の幅になるまで幅が変化するたびに再び 0 に減少し、再び 20 ピクセルとして表示されます。

IEで開発者ツールを使用すると、vmlグループにギャップが含まれていることがわかりますが、私の論文の内容はギャップを埋めていません-したがって、coordsizeに接続されていると思います

他の誰かが同じ問題を抱えているかどうか疑問に思っています（そうでない場合は、説明が非常に難しいため、おそらく私の質問を理解できないでしょう）

4

1 に答える 1

1

しばらく前に、Raphael のキャンバスを「レスポンシブ」にする独自のスクリプトを作成しました。はい、私はIE7-8のギャップにも悩まされていました。しかし、私のギャップは一定でした。今、私のスクリプトは正常に動作します。シンプルなレスポンシブ サイズが必要な場合は、そのためのプラグインは必要ありません。

var _browser = {};
_browser.ie = userAgent.indexOf("msie") > -1 ? {} : false;
if(_browser.ie)
    _browser.ie.old = (navigator.userAgent.match(/MSIE [6-8]/) !== null);


if(_browser.ie && _browser.ie.old){

    _data.R = Raphael('conainerID', _data.options.width, _data.options.height);

    $(window).on('resize', function(){
          var w = $('#containedID').width();
          var h = $('#containedID').height();
         _data.R.setSize(w,h);
    });

}else{
    _data.R = Raphael('conainerID', '100%', '100%');    
}

そのための流体コンテナを作成する必要があります。固定幅を設定しないでください。ただし、スケーリングを制限するために「最大幅」を設定できます。

<div id="containerID" style="max-width: 1200px;"></div>
于 2013-03-18T17:52:22.947 に答える