Question

我已经花了几个小时似乎无法解决这个问题。我有一个类似于这个的html树：

<div class="region">
  <div class="area" id="one">
    <img src="..." />
    <span>...</span>
...

然后我的css有：

.region {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 80%;
}

.area {
  display: inline-block;
  text-align: center;
  width: 25%;
}

.area img {
  border: 1px solid green;
  margin: 0;
}

问题是由于某些原因我似乎无法在区域类中覆盖img。当我查看firebug时，我只看到正在应用的全局img（显示：内联块）而没有其他内容。

有趣的是，在css中替换“span”的“img”会覆盖它！怎么会发生这种情况？测试错别字等，但我似乎无法弄清楚这一点。

任何提示都非常感谢！

Answer 1

我在Firefox 16.02以及最新的Safari和Chrome中看到了同样的问题。但是，在图像中添加一个类会修复它：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    .region {
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      width: 80%;
    }
    .area {
      display: inline-block;
      text-align: center;
      width: 25%;
    }
    .area img {
      border: 1px solid green;
      margin: 0;
    }    
    .area .place {
        border: 1px solid purple;
    }
    </style>
    <title>Hello Dolly!</title>
</head>
<body>
    <div class="region">
        <div class="area" id="one">
            <img src="../Pictures/TheBridge.jpg" class="place">
            <span>Span This</span>
        </div>
    </div>
</body>
</html>

Answer 2

我发现了导致它的问题，但我不明白为什么会这样。我原来的css选择器看起来像这样：

.area {
  display: inline-block;
  text-align: center;
  width: 25%;
}

.area img {
  border: 1px solid green;
  margin: 0;
}

.area span {
  vertical-align: middle !important;
}

使用此顺序，代码不起作用，img完全被忽略，但span不是。

现在，如果我将img与span交换，保留订单.area，.area span，.area img则忽略span，但img不是！

有人知道是什么原因引起的吗？我从来没有遇到过这种问题。

Answer 3

有人可以在真实的浏览器上试试这个http://jsfiddle.net/UxLuJ/1/，看看你是否可以重现这个问题？

在我的情况下，使用Chrome版本23.0.1271.64和Firefox 16.0.2无法正确解析img标记。解决问题的方法是执行以下操作：在.country和.country img之间添加一个虚拟选择器，如下所示：

.country .foo {}

这样就可以正确识别img标签。

这似乎与Carl报告的错误相同，但我使用了稍微不同的解决方法。

我很感激别人确认这一点。

为什么我不能覆盖div中的img？

3 个答案: