绝对位于 AP 父级之外以进行映射
我正在为使用 XML、CSS 和 jQuery 的客户端开发一个简单的地图应用程序。我可以使用基本功能，但有一件事让我有点困惑。 “地图”是一个大图像，溢出设置为隐藏。然后，通过读取 XML，jQuery 将“区域”（a 标记）放置在图像上，将它们绝对定位到父地图。
该区域包含两个绝对定位的元素，它们需要扩展到其父级之外。在 Chrome、Firefox 和 Safari 中工作得非常好，但 IE 会剪辑任何超出父级的内容。代码如下所示。
<div style="overflow:hidden; width:800px; height:600px;">
<div style="width:1600px; height:1200px; position:relative"><!-- missed out of original post -->
<div style="position:absolute; left:10px; top:10px; width:100px; height:100px; z-index:10">
<a href="#" style="position:absolute; left:80px; top:80px; width:100px; height:30px; z-index:20"> </a>
<a href="#" style="position:absolute; left:-10px; top:90px; width:10px; height:100px; z-index:30"> </a>
</div>
</div>
</div>
剪辑是正常行为还是我遗漏了什么？
编辑：我错过了原始帖子中的主地图 div。
I am developing a simple mapping application for a client which uses XML, CSS and jQuery. I have the basic functionality working but am a bit stumped by one thing. The "map" is a large image with overflow set to hidden. Then by reading the XML the jQuery places "zones" (a tags) on the image positioning them absolutely to the parent map.
This zone the contains two absolutely positioned elements, which need to extend out of their parent. Works exceptionally in Chrome, Firefox and Safari, but IE clips anything that goes over the parent. code looks something like the following.
<div style="overflow:hidden; width:800px; height:600px;">
<div style="width:1600px; height:1200px; position:relative"><!-- missed out of original post -->
<div style="position:absolute; left:10px; top:10px; width:100px; height:100px; z-index:10">
<a href="#" style="position:absolute; left:80px; top:80px; width:100px; height:30px; z-index:20"> </a>
<a href="#" style="position:absolute; left:-10px; top:90px; width:10px; height:100px; z-index:30"> </a>
</div>
</div>
</div>
Is the clipping normal behaviour or is there something I am missing?
EDIT: I missed the main map div out of the original post.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我对此表示歉意，但我已经回答了我自己的问题。这个问题与我的 css 或 html 无关，它与我的 javascript 有关。
我所做的是使用 fadeTo 函数隐藏地图上的所有元素，包括区域本身，然后在重绘区域及其包含的元素时 IE 会剪切图像。
通过删除区域 div 上的淡入淡出并仅淡入内部位来纠正该问题。现在它就像一个魅力。
应用上面的示例，我在实际代码中使用类和 id。
抱歉浪费时间了
詹姆斯
I apologise about this but I have answered my own question. The problem had nothing to do with my css or html it was to do with my javascript.
What I was doing was using the fadeTo function to hide all of the elements on the map, including the zones themselves, then when redrawing the zones and their contained elements IE was clipping the images.
The problem was rectified by removing the fade on the zone div and just fading the inner bits. It now works like a charm.
Example applied to above, I'm using classes and id's in the actual code.
Sorry for the waste of time
James