2

我已经花了几个小时，似乎无法弄清楚这一点。我有一个与此类似的 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 。当我查看萤火虫时，我只看到一个全局 img 被应用（显示：内联块），没有别的。

有趣的是，在 css 中将“img”替换为“span”确实会覆盖它！这怎么可能发生？测试错别字等，但我似乎无法弄清楚。

非常感谢任何提示！

4

3 回答 3

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>
于 2012-11-19T23:53:40.680 回答
0

我发现了导致它的问题，但我不明白为什么会这样。我原来的 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 不会！

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

于 2012-11-19T23:54:43.940 回答
0

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

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

.country .foo {}

这样，img 标签就被正确识别了。

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

我很感激其他人确认这一点。

于 2012-11-20T00:42:01.600 回答