尝试使用 CSS 作用于 <img> 元素 - 但没有得到任何结果答案

【问题标题】：Trying to act on <img> element using CSS - but not getting any results尝试使用 CSS 作用于 <img> 元素 - 但没有得到任何结果
【发布时间】：2009-11-16 21:18:30
【问题描述】：

我已经使用 jQuery 向表格添加了一些展开/折叠功能，现在我正在尝试使用 CSS 对按钮定位进行一些微调，但我似乎无法对 img 元素采取行动。

这是我的代码的摘录：

<body>
 <h1>Outstanding repairs assigned to me</h1>
  <table class="sortable paginated collapsible">
   <thead>
   </thead>
   <tbody id="emergency">
    <tr>
     <th colspan="7">
      Emergency
       <img class="alignment clickable" src="../repair_system/media/minus.png" alt="Collapse this section"/>
     </th>

我的 CSS 文件中的第一个条目是：

.alignment {
    border:7px solid black;
 }

该页面正在选择 CSS 类“可点击” - 但由于某种原因它忽略了“对齐”。 Firebug 甚至不引用 CSS 样式窗格中的 CSS 类。

谁能想到我在这里错过的一些明显的事情？

【问题讨论】：

可点击类是什么样的？
.clickable { 光标：指针；光标：手；颜色：#FFFFFF；文字装饰：下划线； } 虽然已经尝试减去这个类没有任何效果......
在没有看到完整样式表的情况下很难给出答案
当一个规则顽固地拒绝接受时，它通常可能是以前在同一个样式表中的语法错误，混淆了解析器。使用 CSS 验证器来确保您的语法是正确的。 jigsaw.w3.org/css-validator

标签： jquery css image

【解决方案1】：

您在几个不同的浏览器中发布的 sn-p（稍作修改以包含 CSS，并指向不同的图像）works for me。因此，看起来问题一定出在代码中的其他地方。您可能想尝试将问题减少到一个演示问题的小 sn-p，然后发布；在减少它的过程中，您甚至可能自己发现问题。

【讨论】：

已修复 - 错误是由 css 文件第 1 行上的杂散“b”字符引起的 - 不知道它是如何到达那里的！这种方法使我找到了解决方案 - 谢谢。

【解决方案2】：

您是否尝试将 !important 声明添加到 CSS 以查看它是否只是被其他 CSS 覆盖？

.alignment {
    border:7px solid black !important;
 }

【讨论】：

如何在页面中包含 CSS？你确定它肯定在那里吗？

【解决方案3】：

你用的是什么浏览器？怪癖模式与否？ (http://en.wikipedia.org/wiki/Quirks_mode)。

sn-p 也适用于我（内联 css）。

内联css：只要把它放在

里面

标签。最好在标题中完成。

【讨论】：

FF3 和 IE8 应该不是问题，只要您不处于 quirks 模式。

【解决方案4】：

据我所知，IE 显示在旧版本的图像中，这些图像总是带有边框。您必须通过将样式设置为无边框来移除此边框。

也许 jQuery 试图通过神奇地将图像边框设置为 0px 来避免这个问题。尝试通过直接在 img 标签中设置样式来覆盖它：

<img style="border:7px solid black" ... > ...

这应该覆盖所有其他样式。

是的，我知道。以这种方式设置样式不是最佳实践，但可能有助于调试。如果有效，您就知道该样式已设置在其他位置并覆盖了您自己的定义。

顺便说一句：使用像“web developer”这样的 FF 插件也可能会有所帮助。有一些工具可以向您展示特定元素的样式定义的来源。

【讨论】：