Создание элемента в расширении браузера наследует браузер CSS?

Question

Я работаю над расширением Firefox, и одна из вещей, которые мне нужно сделать, это добавить элемент в DOM. У меня нет проблем с этим, за исключением того, что я отмечаю, что этот элемент наследует некоторый стиль из xul.css, чего я хотел бы избежать (и вместо этого просто используйте стиль, который использует исходная страница):

Код очень прост:

var span = document.createElement('span');
node.appendChild(span)

и с firebug я вижу, что он использует

* {
    -moz-box-sizing: border-box;
    -moz-user-focus: ignore;
    -moz-user-select: -moz-none;
    display: -moz-box;
}

Так, как я могу заставить элемент не использовать вышеупомянутый css?

Спасибо

Answer 1

Это потому, что вы создали элемент XUL, а не элемент HTML.document в вашем случае это документ XUL (что из окна браузера?), А пространство имен по умолчанию для созданных элементов - http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul.Если возможно, вы должны всегда создавать элементы в документе, в которые они будут вставлены:

node.ownerDocument.createElement("span");

Вы также можете явно указать пространство имен HTML:

node.ownerDocument.createElementNS("http://www.w3.org/1999/xhtml", "span");

Answer 2

Если у вас есть несколько таблиц стилей, один может переопределить другой.Приведенный выше код - это ловушка для размещения определенного стиля для всех элементов в разделе или на всей странице.Единственный способ сделать это - применить свой собственный стиль после создания элемента span, предпочтительно display: block;

Вы можете попытаться удалить стиль с помощью следующего скрипта jquery после его создания

span.setAttribute('id',"MyElement");
$('#MyElement').removeClass('*');

ИЛИ вам придется перегрузить его с помощью

---

span.setAttribute('id',"MyElement");
document.getElementById("MyElement").className = "predifinedClass";

или jquery

span.setAttribute('id',"MyElement");
$('#MyElement').addClass('MyClass');
----- OR -----
$('#MyElement').css('display','block'); // to specify 1 css rule