我有一个带有代表用户当前状态的连接器 div 的文本区域。 connector-div 是绝对定位的,因此它与 textarea 一起形成一个对话气泡来表示用户正在“说”什么。连接器将被放置在文本区域的“顶部”(通常是更高的 z-index)并且它在每个浏览器中都可以正常工作,但不幸的是我必须支持 IE7。在 IE7 中,connector-div 位于文本区域下方,这就是问题所在。
我已经在 IE7 中搜索了 Z-index bug 的问题,并尝试了几个我发现的解决方案,但没有一个解决了我的特殊情况。
我有以下简化的 html:
”
<form class="current-status">
<div class="talk-bubble">
<div class="connector"> "Absolute positioned with high z-index.." </div>
<textarea> "User status goes here" </textarea>
</div>
</form>
”
current-status-div 只是静态定位的, talk-bubble-div 是相对的, connector-div 是绝对的,z-index 为 4, textarea 是相对的,目前没有 z-index 因为它在除 ie7 之外的任何地方都可以使用。 但我尝试在 texarea 上设置低 z-index,在连接器上设置高,但 IE7 有奇怪的堆叠..
我尝试了很多不同的解决方案,包括定位、z 索引、环绕元素等,但似乎没有任何效果。
有人有想法吗?
与问题相关的一些 CSS:
.content-box-plate {
position: relative;
z-index: auto;
}
.talk-bubble {
position: relative;
z-index: auto;
}
.connector {
background: url("/images/portal/bubble_connector.png?1314369295") no-repeat scroll center center transparent;
height: 12px;
position: absolute;
right: 5px;
width: 21px;
z-index: 4;
}
textarea {
font-size: 13.5px;
font-style: italic;
height: 40px;
line-height: 1.25em;
overflow: auto;
padding: 6px 6px 6px 8px;
position: relative;
width: 165px;
z-index: auto (tried to put a specific value lower than connectors without effect)
}
最佳答案
没有您的代码很难回答,但是您还需要在父 div 上设置 z-index,这是我在 IE6/7 中修复的一个常见问题,因为我也必须支持它们。
您可能不需要深入到表单,但如果没有您的 CSS 并且看到它是实时的,这很难说 - 不过这个或附近会修复它!
你需要位置有一个有效的 z-index,不要担心页面上的其他 z-index 等等。因为这是封装在表单中的;当然可以将值更改为您想要的任何值,但这就是排序。
<form class="current-status" style="position:relative; z-index:1;">
<div class="talk-bubble" style="position:relative; z-index:1;">
<div class="connector" style="position:absolute; z-index:2"> "Absolute positioned with high z-index.." </div>
<textarea style="position:relative; z-index:1"> "User status goes here" </textarea>
</div>
</form>
关于html - IE7中绝对定位元素的Z-index问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7486131/