Internet Explorer и Firefox превращает встроенный CSS в странные вещи

Question

У меня есть некоторый HTML, который я вставляю в div, используя javascript. Но он превращает встроенный CSS во что-то странное. Как, например, если я вставлю в div следующий HTML (используя document.getElementById("element").innerHTML = ...):

<td valign=top style= border: 0; padding: 0;>

Когда я вижу, что на самом деле находится в элементе div (используя FireBug), вот что это такое:

<TD vAlign=top 0; padding:>

Это я как-то вызывает эту ошибку? Считаете ли вы, что это происходит с вами также, когда вы вставляете какой-то HTML со встроенным CSS в div, используя javascript? Любая информация будет очень полезна

Answer 1

Значения атрибута должны иметь кавычки вокруг них:

<td valign="top" style="border: 0; padding: 0;">

Кроме того, поскольку этот HTML-код встроен в Javascript в виде строки, будьте осторожны с кавычками.Я рекомендую одинарные кавычки (') для начала / окончания строк Javascript и двойные кавычки (") для начала / окончания значений атрибутов:

document.getElementById('element').innerHTML =
    '<td valign="top" style="border: 0; padding: 0;">';

Answer 2

Вы пытались процитировать свои атрибуты?

<td valign="top" style="border: 0; padding: 0;">

также обратите внимание, что valign = "top" очень устарела.наконец, используйте

vertical-align: top;

, я настоятельно призываю вас избегать встроенного CSS.

Answer 3

Попробуйте обернуть их в кавычки:

<td valign=top style="border: 0; padding: 0;">