Я использую логотип SVG в качестве фонового изображения, и я не могу заставить его правильно выравниваться по левому краю в Internet Explorer(редактировать: и Safari).

Контейнеры выглядят так:

<div id="header">
    <div id="logo"></div>
</div>

Со стилями:

#header{
    width: 100%;
    max-width: 1200px; 
    height: 100%;}

#logo{
    background: url(../images/ss_logo.svg);
    background-position: left center;
    width: 100%;
    height: 100%;
    float: left;}

Вы можете видеть, что<div> должен охватывать 100% своего родителя, но отображать логотип слева от элемента. Это прекрасно работает в Chrome и Safari, но логотип всегда центрирован внутри<div id="logo"> в IE.

Похоже, информацию по этому вопросу действительно трудно найти, была ли у кого-то еще такая же проблема?

Вот ссылка например версии проблемызеленое поле - это SVG.