看我的小提琴： http://jsfiddle.net/5BEsZ/
我发现了一些非常奇怪的东西，我还没有在其他地方看到过记录......想知道你们是否都有解决方案。
您会注意到图像元素的负边距达到约-212％的限制。是否有一个原因？你能想到一个解决方案吗？
为什么我需要这个（我尝试过的）：
我正在进行流畅的布局，我想显示一个评级系统。我有一张星形精灵（类似于小提琴中的那颗），我希望以各种尺寸重复使用。
因为尺寸变化我不能使用背景图像。所以我决定在宽度可变且overflow:hidden的容器中使用图像。精灵表调整到容器的宽度，容器的可查看内容由padding-top:20%确定。这是因为它的宽度可以是流动的（因为每个星都是一个盒子，总高度是宽度的20％）。
然后我尝试将带有margin-top的星形图像定位在容器内。我尝试使用position:relative和top:-X%，但由于容器在技术上没有高度，这导致手机出现问题（0的100％为0，等等）。
所以我假设负边际会起作用，但后来发现了这个奇怪的问题！
注意：因为它只影响最后一行，所以我可以通过使用填充底部而不是顶部（从而使每个星形行向上碰撞1）使其在我的情况下工作，但是这对我来说不是一个合适的解决方案，因为它只是忽略了这个问题。如果我想要四分之一明星怎么办？
答案 0 :(得分：2)
我已更新您的fiddle。默认情况下，img标记是“内联”元素，这会影响相对于包含元素计算边距的方式。通过强制将图像元素渲染为块（display: block），您可以获得预期的结果。默认情况下，div元素是一个块。
作为旁注，您将尽可能避免使用内联样式（不同类型的“内联”！）。通常，您的样式将包含在样式表中，而不是直接包含在元素的style属性中。我在属性中包含了修复程序（display: block）以匹配html的代码样式。
答案 1 :(得分：1)
我不知道为什么，但如果你浮动图像，问题就会消失。
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
所以，解决问题的答案是：http://jsfiddle.net/5BEsZ/2/
如果有人能解释为什么会这样？