HTML 和 CSS 定位 [重复]答案

【问题标题】：HTML and CSS Positioning [duplicate]HTML 和 CSS 定位 [重复]
【发布时间】：2011-05-02 20:53:05
【问题描述】：

可能重复：
Text input with z-index inaccessible by click in IE

如果您点击此链接，您会看到我正在尝试在可拖动的图像顶部的 div 内显示一个文本框。

http://jsfiddle.net/N87CX/27/

我有 2 个问题

在 IE 8 中我无法点击内部文本框。
大小也有问题调整 div 大小时的文本框它确实超出了父 div。

我可以重新构造这个人以解决这两个问题吗？

谢谢。

【问题讨论】：

我检查了它，但它对我来说非常有效。移动和编辑。
@user719813 - 在 IE 8 中签入？
只是为了你的理智；它在 IE7 或 IE8 中都不适用于我，并且在 IE9 中存在问题。

标签： html css positioning css-position resizable

【解决方案1】：

这是一个非常有趣的问题。

在我看来，关于 IE8 的第一部分是文本区域内的透明背景问题。如果将颜色应用于背景，则可以按预期访问文本区域。为了让这更有趣 - 当您添加默认文本时，您只能访问该文本已经存在的文本区域。

所以我建议研究一下 IE 7 和 IE 8 如何处理/创建透明背景。并且可能会质疑它是否真的需要透明（如果您想要简单的出路）。

您提到的第二个关于扩展父 div 的 div 的问题可以通过将 overflow: hidden 添加到父 div 来解决 - 在这种情况下，您应该将其添加到您的 css 中的 #dragDiv 项目中。在 div 中使用浮动元素时通常会出现这种情况 - 您应该阅读有关浮动元素并清除它们的更多信息 (clear: both)，因为如果处理不当，它们会导致很多问题。

希望对您有所帮助，如果您找到第一个问题的原因，我很想知道！

【讨论】：

【解决方案2】：

IE 在输入和文本区域上有一个透明背景的错误，最好的办法是使用transparent.gif 作为背景

接下来我发现IE不会接受textarea上的100%（或任何百分比）的高度，即使父div有明确的高度，但是如果你在textarea上设置高度就会出现好好的

示例：HERE

我发现最好使高度至少是行高的两倍，否则滚动看起来不整洁（有点开箱即用），而且我从inDragDiv 中删除了定位，让它默认在标题下..那里在 IE7 中仍然有 1px 的差异，低于该差异我已经使用负边距进行了更正。在 IE7 中，定位正在占据它，textarea) 一直很紧.. 如果你仍然想使用绝对定位，你应该明确声明left: 0; 属性

【讨论】：

【解决方案3】：

有类似的问题 -> IE8 文本框不可编辑（当我的应用程序的包装器具有位置：绝对时）。单击仅在边框中起作用。填充颜色和透明也不起作用。通过此文档类型更改，问题得到解决。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

来源：http://www.codingforums.com/showthread.php?p=1173375#post1173375

【讨论】：