Question

我正在尝试将拉斐尔画布放入比实际画布小的div中。所以基本上我有这样的事情：

var paper = Raphael("test", 2000, 2000); 
var a = paper.rect(0, 0, 2000, 2000).attr({fill: "#000"}); 
//
<div id="test" style="width: 500px; height: 500px; overflow: auto;"></div>

看起来够简单？大多数浏览器对此没有任何问题，但IE7强制整个2000x2000矩形在屏幕上忽略整个div约束。

我尝试将div放在另一个div中，如下所示：

<div id="ieholder" style="width: 500px; height: 500px; overflow: auto;">
<div id="test" style="width: 2000px; height:2000px;"></div>
</div>

但没有运气，同样的事情发生了。有没有解决的办法？这个整个事情已经是妥协，因为我使用raphael-zpd给用户缩放和平移功能，但因为它不适用于IE我认为我只为IE用户提供具有基本平移功能的图像，但没有！该死的你IE！

http://jsfiddle.net/WdwGQ/

<div id="ieholder" style="width: 500px; height: 500px; overflow: auto;">
<div id="map" style="width: 2132px; height: 2872px;">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2000" height="2000">
    <desc>Created with RaphaÃ«l</desc>
    <defs>
    <rect x="0" y="0" width="2000" height="2000" r="0" rx="0" ry="0" fill="#000000" stroke="#000">
    </svg>

</div>
</div>

Answer 1

提示您的用户使用Google's Chrome Frame，将Chrome的渲染引擎嵌入IE？

或者，提示他们使用a better browser？

这不是解决潜在问题的真正方法，但它会使潜在问题无关紧要。可能有也可能没有办法让IE7做你想做的事。我经常发现没有......

Answer 2

这篇文章提供了答案：

IE7 CSS Scrolling Div Bug

使外部<div>（overflow:auto样式的position:relative}将其排序。

IE溢出问题：auto;和Raphael帆布被装入DIV

2 个答案: