Question

我已经使用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类。

有人能想到我在这里错过的明显事物吗？

Answer 1

您在几个不同的浏览器中发布的代码段（稍微修改以包含CSS，并指向不同的图像）works for me。因此，看起来问题必须在代码中的其他内容中。您可能希望尝试将问题缩小到一个演示问题的小片段，然后发布;在减少它的过程中，你甚至可以自己发现问题。

Answer 2

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

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

Answer 3

你正在使用什么浏览器？怪怪模式与否？（http://en.wikipedia.org/wiki/Quirks_mode）。

该片段也适用于我（内联css）。

内联css：只需将其放在

中

＆LT;风格＆GT;＆LT; /风格＆GT;

标记。最好在标题内完成。

Answer 4

据我记忆，IE显示在旧版本的图像中，这些图像始终与边框链接。您必须通过将样式设置为无边框来删除此边框。

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

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

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

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

BTW：使用像“web开发者”这样的FF插件也可能有所帮助。有些工具可以向您展示特定元素的样式定义的来源。

尝试使用CSS对<img/>元素进行操作 - 但没有得到任何结果

4 个答案: