2016-04-29 5 views
1

これはなぜ起こっているのか?IEは私のSvgをセンタリングしています

次のコードをchromeの新しいcodepen.ioに貼り付けると、細かい目盛が表示され、左上隅に表示されます。私の簡単なテストで

しかしページの中央にIEとその右に表示し

http://codepen.io/anon/pen/RaeYjd

<svg version="1.1" class="pull-left svg-header-tick" xmlns="http://www.w3.org/2000/svg" height="22px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 72" enable-background="new 0 0 92 72" xml:space="preserve"><g><path class="svgcolor" d="M28.1,71.8L1.9,45.6c-2.3-2.3-2.3-6.1,0-8.5c2.3-2.3,6.1-2.3,8.5,0l17.8,17.8L81,2c2.3-2.3,6.1-2.3,8.5,0 
    c2.3,2.3,2.3,6.1,0,8.5L28.1,71.8z"></path></g> 
           </svg> 

答えて

2

それだけheight IE(EDGEないを設定することでいるようだ - それが正常に見えます)は、svg要素全体を水平に伸ばしています。 width属性を追加すると、左上隅にスナップします。 CSSで高さと幅を設定しても機能します。

From CSS Tricks:

多くのブラウザ-IE、サファリ、オペラとChromeのバージョンでは、夏2014-しません自動サイズのインラインSVG前にリリースしました。高さと幅の両方を指定しない場合、これらのブラウザは通常のデフォルトサイズを適用します。これは前述のようにブラウザごとに異なります。画像はその高さまたは幅の内側に収まるように拡大縮小され、その周りに余分な余白が残されます。また、高さと幅の両方をautoにすると、何が起こるかにも矛盾があります。

+0

ありがとう!完璧な –

関連する問題