IE溢出问题:auto;和 Raphael 画布被加载到 DIV 中
我正在尝试将 Raphael 画布放入比实际画布小的 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!
<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>
I'm trying to place a Raphael canvas in to a div which is smaller than the actual canvas. So basically I have something like this:
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>
Seems simple enough? Most browsers have no problem with this but IE7 forces the whole 2000x2000 rectangle on screen ignoring the whole div constraints.
I tried placing the div within another div like so:
<div id="ieholder" style="width: 500px; height: 500px; overflow: auto;">
<div id="test" style="width: 2000px; height:2000px;"></div>
</div>
But no luck, same thing happened. Is there a way around this? This
whole thing is already a compromise as I use raphael-zpd to give users
zoom and pan functionality but as it doesn't work on IE I thought I'd
just give IE users the image with basic pan functionality but no! Damn
you IE!
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
提示您的用户使用在 IE 中嵌入 Chrome 渲染引擎的 Google 的 Chrome 内嵌框架?
或者,提示他们使用更好的浏览器?
这并不是真正解决根本问题的方法,但它会使根本问题变得无关紧要。可能有也可能没有办法让 IE7 做你想做的事。我经常发现没有...
Prompt your users to use Google's Chrome Frame, which embeds Chrome's rendering engine in IE?
Alternatively, prompt them to use a better browser?
That's not really a solution to the underlying problem, but it would make the underlying problem irrelevant. There may or may not be a way of getting IE7 to do what you want. I have often found there isn't...
这篇文章提供了答案:
IE7 CSS Scrolling Div Bug
制作外部
< ;div>
(具有overflow:auto
样式的那个)position:relative
对其进行排序。This post provides the answer:
IE7 CSS Scrolling Div Bug
Making the outer
<div>
(the one with theoverflow:auto
style)position:relative
sorts it out.