css - CSS 100％高度(同时保持宽高比)的技巧触发圆形WebKit重绘错误

我正在使用这种令人赞叹的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">并选择“检查元素”，则它会对齐尺寸！颁布this heinous redraw hack时也是如此：

var image = $('img').get(0);
var oldDisplay = image.style.display;

image.style.display = 'none';
image.offsetHeight; // Secret sauce
image.style.display = oldDisplay;

确实，我正在尝试根据<img>的大小确定<li>的大小，而<img>的大小基于的大小。我怀疑WebKit中有一项优化工作会破坏这种循环引用。该怎么办？

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

最佳答案

这可能离答案还很远，但我只是使用了隐藏图像的相同技术来使周围的div伸展并保持宽高比。对我来说很好。也许您可以忽略js，而只是看看CSS / HTML是如何工作的：http://jsfiddle.net/kthornbloom/H2G7z/5/

 .