IE9, IE8, SVG, VML и типы документов

Я работаю над рисованием фигур в своем веб-приложении ASP.NET. В IE9 и других браузерах я использую SVG, и он отлично работает. В IE8 и ниже я использую VML. Я обнаружил, что IE8 вообще не отображает VML, когда он находится в режиме стандартов IE8 (без использования представления совместимости).

Мой тип документа установлен на <!DOCTYPE html>. Если я полностью уберу doctype, IE8 перейдет в режим quirks и будет работать нормально, но IE9 затем перейдет в режим quirks его (вместо стандартов IE9) и не отобразит SVG.

Это происходит на тестовой странице, поэтому там нет ничего, кроме формы, содержащей div, содержащий либо элемент <svg> и его дочерние элементы, либо элементы VML.

Что здесь происходит? Похоже, что мне не нужно менять doctype для разных браузеров, и график репутации на странице пользователя Stack Exchange, похоже, работает одинаково (VML для IE8 и ниже, SVG для всех остальных, doctype HTML5) ...


svg internet-explorer internet-explorer-8 internet-explorer-9 vml
person Tom Hamming    schedule 31.05.2012    source источник
comment
Задумывались ли вы об использовании операторов условий в doctype? <!--[if IE 8]> <!doctype ... > <![endif]--> Я знаю, что это не то, о чем вы спрашиваете, но это может быть альтернативное решение.   -  person Eruant    schedule 10.07.2012

Ответы (3)


arrow_upward
5
arrow_downward

Есть еще пара вещей, которые вам нужно проверить:

Селектор правил поведения необходимо изменить.

  • При установке размеров или положения элемента единицей измерения по умолчанию не является пиксель. Это должно быть явно указано для работы.
  • Вы не можете создать элемент VML вне DOM:

.

var vmlFrag = document.createDocumentFragment();
vmlFrag.insertAdjacentHTML('beforeEnd',
'<v:rect id="aRect" fillcolor="red"         
style="top:15px;left:20px;width:50px;height:30px;position:absolute;"></v:rect>'
);
document.body.appendChild(vmlFrag);
  • Элемент rect не будет отображаться! Вы также не можете изменить его CSS, так как вы, вероятно, просто разобьете браузер. Однако есть исправление. Скопируйте внешний HTML элемента в себя:

.

var aRect = document.getElementById('aRect');
aRect.outerHTML = aRect.outerHTML;
person miracules    schedule 10.07.2012

arrow_upward
3
arrow_downward

Чтобы объявить пространство имен VML в стандартном режиме IE8, вам необходимо включить третий '#default#VML' аргумент:

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');

Есть другие изменения VML в IE8, о которых вам может потребоваться знать.

person Jeffery To    schedule 03.07.2012
comment
На самом деле я использую его предложение внизу, чтобы заставить все работать в стандартном режиме IE7. Если это IE8, то Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7"); - person Tom Hamming; 09.07.2012

arrow_upward
1
arrow_downward

Исходный код HighCharts дал решение. Помимо добавления пространства имен во время выполнения, вам также необходимо добавить определенное поведение CSS:

<!--[if lte IE 8 ]>
<script type="text/javascript">
    document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
    document.createStyleSheet().cssText =
        'vml\\:fill, vml\\:path, vml\\:shape, vml\\:stroke' +
        '{ behavior:url(#default#VML); display: inline-block; } ';
</script>
<![endif]-->

После этого созданные js элементы будут видны на странице. Посмотрите демонстрацию.

person nniico    schedule 09.01.2013