谷歌浏览器 - CSS 100% 高度(同时保持纵横比)技巧触发循环 WebKit 重绘错误

Question

我正在使用这种非常棒的CSS技术来迫使<li>和他们的父<ol>/<ul>一样高，同时保持我选择的纵横比。

这个想法是制作一个具有目标纵横比的透明 GIF 或 PNG，然后使用该图像按比例拉伸<li>。

.HTML：

<ol>
  <li>
    <img src="1x1.gif" height="1" width="1">
    <div class="content">
      …
    </div>
  </li>
</ol>

.CSS：

ol  { height: 50%; } /* half the height of the viewport, let's say */
li  { height: 100%; position: relative; display: inline-block; }
img { height: 100%; width: auto; }
.content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

甜。问题是，如果您通过调整视口大小来调整<ol>的大小，WebKit 将不会费心重新计算<img>的大小，并且您的纵横比将被拍摄。但是，如果您右键单击<div class="content">并选择"检查元素"，它将捕捉到大小！当你制定这个令人发指的重绘黑客时也是如此：

var image = $('img').get(0);
var oldDisplay = image.style.display;
image.style.display = 'none';
image.offsetHeight; // Secret sauce
image.style.display = oldDisplay; 

真的，我正在尝试根据<li>的大小来调整<img>的大小，该的大小基于<img>的大小。我怀疑 WebKit 中有一个优化，它对这种循环引用进行了双关。怎么办？

这是一个JSFiddle，您可以在其中亲自体验该错误：http://jsfiddle.net/steveluscher/H5Mkm/

Answer 1

这可能远非答案 - 但我只是使用了隐藏图像的相同技术来使周围的div拉伸并保持纵横比。对我来说效果很好。也许你可以忽略js，看看CSS/HTML在我的小提琴中是如何工作的：http://jsfiddle.net/kthornbloom/H2G7z/5/

 .