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

Question

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

我们的想法是制作一个具有目标宽高比的透明 GIF 或 PNG，然后使用该图像拉伸(stretch) <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> 的大小通过调整视口(viewport)的大小，WebKit 不会费心重新计算 <img> 的大小, 并且您的宽高比被拍摄。但是，如果您右键单击 <div class="content">然后选择“Inspect Element”，它会调整大小!当你制定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，您可以在其中亲 body 验错误:http://jsfiddle.net/steveluscher/H5Mkm/

Answer 1

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

 .