Css 为什么我缩小时Chrome会剪裁我的身高：100%SVG

当我缩小时，Chrome会剪辑我的SVG图形。Firefox和IE9没有

为什么会发生这种情况

。有一个

，里面有一个

，
而

的高度是100%。
如果你在Chrome中缩小，你会注意到

被截断，在“底部”上方越来越高，你缩小的越多

（我如何避免它？我正在考虑记住最大x和y值，并明确设置

宽度，这似乎是可行的。）

更新：

现在我找到了一个解决方法：计算浏览器的缩放因子，并用反向缩放因子放大每个

，然后它们变得足够大。像这样：

if ($.browser.webkit) {
  // outerWidth is measured in screen pixels, innerWidth in CSS pixels.
  // So outerWidth / innerWidth is the zoom %.
  var invZoom = (window.innerWidth / window.outerWidth * 100) +'%';
  $('svg').css('width', invZoom).css('height', invZoom);
}

（是一个关于计算缩放级别的线程）

我仍然有点好奇为什么Chrome会这么做。屏幕像素与CSS像素/大小是否存在一些问题

更新：2012-02-25

---

现在这个问题不再是可重复的了。可能一些相关的Chrome bug（？）已经被修复。

对于我正在进行的响应性设计，我在SVG方面也遇到了类似的问题。我最终删除了SVG元素上的高度和宽度属性，并通过CSS进行设置。我的SVG元素上还有一个viewBox属性，并保留aspectratio=“xMidYMin meet”。通过这种设置，我能够拥有一个SVG元素，它可以根据视口大小动态调整大小。

我认为您面临的问题是由于outter容器具有动态大小。为outter div height指定一个刚性大小（以像素为单位）并为子元素指定动态大小（%value），这将满足您的需要。