Question

我加载了这个CSS：

#ue_email_new{
  border:  1px solid #000000;
}

在页面加载时准确显示。

但是，在单击inspect元素（FF 17）并查看CSS后，我在调试器中看到了这些信息：

element {
    border: 1px solid rgb(221, 221, 221);
}

并且边框在实际页面上更改为此奇怪设置。

这是从哪里来的？

我检查了我的CSS，但找不到这些设置。

究竟是什么？

element

标记调试器指的是什么？

HTML看起来像这样：

<div id="wr_ue_email_new">
  <input autocomplete="off" class="radius_all" name="email" id="ue_email_new" type="text" maxlength="320" />
  <p id="ue_email_lab" class="ue_lab_new">Email</p>
</div>

Answer 1

element关键字用于指示元素的内联样式。这就是为什么它会覆盖样式表中列出的CSS。

所以在Firefox检查器中CSS：

element {
    border: 1px solid rgb(221, 221, 221);
}

表示您渲染的html是这样的：

<input style="border: 1px solid rgb(221, 221, 221);" autocomplete="off" class="radius_all" name="email" id="ue_email_new" type="text" maxlength="320" />

首先检查你的源代码html以确保你没有任何内联样式，然后检查没有添加内联样式的JavaScript。

Answer 2

您看到的element { .... }代码似乎可能是Firebug报告当前元素的内联样式。（我在这里的Firefox / Firebug的当前版本是element.style {...}而不是element，Chrome也是如此，但我仍然认为这就是它的原因。

我怀疑你所看到的是一些Javascript事件被触发。可能是mouseover事件或类似事件，该事件正在为元素设置CSS边框。

当您使用Firebug选择元素时，它会在您找到所需元素时暂停页面的正常事件处理并选择它。但是，只要选择元素，页面就会恢复正常并触发事件。

我的猜测是此时正在触发相关事件。运行该事件的Javascript代码，并设置CSS边框。这似乎是Firebug对样式进行了更改，但事实并非如此;只是你的事件处理代码做了一些意想不到的事情。

这也解释了为什么你在CSS中找不到代码 - 因为它在你的JS代码中。

我会尝试在JS代码中搜索有问题的颜色（正如@adaam所说，等效的十六进制值是#DDDDDD，尽管它也可能是#DDD）。

样式意外地在页面上更改

2 个答案: