是什么导致了这些浏览器渲染问题？ Z 索引冲突？定位规则？
我正在开发一种产品，供许多客户与我们的 Web 应用程序一起使用。
快速背景：
- 这些客户已将我们开发的小部件合并到他们的页面中。
- 可以使用我们的应用程序修改小部件的内容。
- 该产品背后的想法是我们提供的一个小书签，它将在其页面上“突出显示”我们的小部件，将其转变为可点击的链接，通向我们应用程序中的管理面板。
“高亮”效果其实涉及到一些z-index的技巧；我们创建一个半透明的“背景”
http://skitch.com/troywarr/dtexp/example -good
然而，在 Safari 以及某些条件下的 Firefox 中，似乎存在某种渲染伪影，导致其无法按预期显示：
http://skitch.com/troywarr/dteqx/example-bad
正如您从屏幕截图中可以看出的，有几个元素（我们的徽标图像和包含广告的 ）仍然如预期的那样“明亮”。但是，小部件的其余部分仍然处于阴影状态。
我已经研究 Firebug 很长一段时间了，试图找出问题的根源，但我还没有得到任何启示。我希望有人遇到过类似的问题，或者认识到此类问题的“视觉签名”。或者，如果您只是擅长 JavaScript/jQuery 和/或 Firebug，我真的可以利用您的帮助来尝试找出这种方法的不足之处。
我创建了一个测试书签作为实例。要查看它，请：
- 打开 Firefox（正在开发的版本目前只能在其中可靠运行）。
- 转到此页面并将链接拖动到书签栏：示例书签
- 导航至：http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
- 单击该书签页面，你应该明白我指的是什么。
提前非常感谢您的帮助！这让我很困惑。
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
- These customers have incorporated into their pages a widget that we've developed.
- The widget's content can be modified by using our application.
- The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
- Open Firefox (the version under development currently only works there reliably).
- Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
- Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
- Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我本来打算放弃这个，但我想我发现了问题。这里有大量的 DOM 元素，但幸运的是这不是导致此问题的问题。
DIV#onespot_nextclick 内的 iframe 需要 #FFF 的背景颜色。
简单的！
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!