Как заставить Internet Explorer лучше работать с изображениями изображений

Question

Слева находится хром, справа - IE9, то же изображение, тот же html, но один из них выглядит как полный дерьмо. Как заставить IE не испортить мои изображения?

Вот фактическое изображение отображается на странице, в том случае, помогает

Вот HTML:

<div id="logo-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="height: 80px; width: 950px; left: 0px; top: 0px;"> 
<img src="/static/img/logo.gif" height="40"><a id="logout" href="/viewer/logout">Logout</a> 
<div id="logo-clearEl" class="x-clear" role="presentation"> 
</div> 
</div> 

Вот CSS для img tag

#logo-body img { 
    margin-top: 20px; 
    margin-left: 10px; 
} 
.x-border-box, .x-border-box * { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
fieldset, img { 
    border: 0; 
} 

и CSS для родительского DIV

#logo-body { 
    border: none; 
} 
#logo, #logo-body { 
    background-color: #002d56; 
    background-image: -moz-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%); 
    background-image: -webkit-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%); 
    background-image: -o-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%); 
    background-image: -ms-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%); 
    background-image: radial-gradient(50% 50%, cover, #008dc6, #002d56 68%); 
} 
.x-panel-body-default { 
    background: white; 
    border-color: #99bce8; 
    color: black; 
    border-width: 1px; 
    border-style: solid; 
} 
.x-panel-body-default { 
    background: white; 
    border-color: #99bce8; 
    color: black; 
    border-width: 1px; 
    border-style: solid; 
} 
.x-panel-body { 
    overflow: hidden; 
    position: relative; 
    font-size: 12px; 
} 
.x-border-box, .x-border-box * { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { 
    margin: 0; 
    padding: 0; 
} 

Answer 1

Простой ответ на это, что вы не можете. IE - это всего лишь нижний браузер практически во всех отношениях, и он показывает все больше и больше, от рендеринга изображения до отладки, до поддержки css, вы называете его.

Преобразование в PNG из GIF ничего не дало, создание совершенно нового логотипа действительно решает проблему, но на самом деле не отвечает на вопрос. Когда-нибудь IE перестанет существовать (надеюсь), и мы больше не будем тратить больше времени на устранение недостатков, чем создание целых продуктов.

Для тех из вас, кто помог создать IE, проклятие на вас и всех ваших потомков.

Answer 2

Это может быть само изображение, Вы можете попробовать сохранить его как PNG, а что в формате GIF.

PNG обычно приводит к получению более прогнозного изображения с меньшими размерами файлов, чем GIF для одних и тех же видов ... More

Или воссоздать образ и использовать другой формат файла. Как это:

, например: http://jsfiddle.net/Wy8Y4/8/

<img src="http://i.stack.imgur.com/xbEug.png" height="40"><a id="logout" href="/viewer/logout">Logout</a>