为啥我不能在 div 中覆盖 img？
Posted
技术标签:
【中文标题】为啥我不能在 div 中覆盖 img？【英文标题】：Why can't I override an img inside a div?为什么我不能在 div 中覆盖 img？ 【发布时间】：2012-11-19 23:24:33 【问题描述】：我已经花了几个小时，似乎无法弄清楚这一点。我有一个类似这样的 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”确实会覆盖它！这怎么可能发生？测试了拼写错误等，但我似乎无法弄清楚。
非常感谢任何提示！
【问题讨论】：
奇怪。您有我们可以查看的公共 URL 吗？ 是否还有其他 css 选择器比 .area img 具有更高的优先级？ 对我来说很好：jsfiddle.net/UxLuJ 我们可能需要更完整的资源才能提供帮助。 不幸的是，我在本地主机中有这个。我将开始禁用其他 div 以查看是否有变化。也许我在这里省略的东西是问题所在。 如果在 CSS 中将“.area img”更改为“#one img”会发生什么？ 【参考方案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>
【讨论】：
谢谢卡尔，很高兴看到我并不孤单。不幸的是，您的修复在我的情况下不起作用（在 Ubuntu 上使用 Chrome 版本 23.0.1271.64），但这足以开始怀疑可能有一些错误导致这种情况发生。会继续寻找。【参考方案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 不会！
有人知道是什么原因造成的吗？我从来没有遇到过这种问题。
【讨论】：
你能展示一下你在 span 里面有什么吗... span 里面有没有另一个 .. 将整个 HTML 复制到 region 类中 Span 包含一些固定文本：France @Dan.. 你能用小提琴重现这个问题吗？ 问题是它在小提琴中可以正常工作：请参阅jsfiddle.net/UxLuJ/1 以获取最新版本。但由于某种原因，在我的浏览器上它不会覆盖 img。【参考方案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？的主要内容，如果未能解决你的问题，请参考以下文章
CSS：如何缩放 <img> 以覆盖整个父 <div>？ [复制]