IE溢出问题:auto;和 Raphael 画布被加载到 DIV 中

发布于 2024-11-29 23:23:06 字数 1273 浏览 1 评论 0原文

我正在尝试将 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!

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>

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!

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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

北凤男飞 2024-12-06 23:23:06

提示您的用户使用在 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...

归属感 2024-12-06 23:23:06

这篇文章提供了答案:

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 the overflow:auto style) position:relative sorts it out.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文