HTML 和 CSS 定位
可能的重复:
在 IE 中单击无法访问带有 z-index 的文本输入< /a>
如果您点击此链接,您可以看到我正在尝试在图像顶部的 div 内显示一个可拖动的文本框。
遇到 2 个问题
- 我在 IE 8 中 无法点击内部 文本框。
- 还有尺寸问题 调整 div 大小时的文本框 它确实走出了父div。
我可以重组这个人来解决这两个问题吗?
谢谢。
Possible Duplicate:
Text input with z-index inaccessible by click in IE
If you follow this link you can see that i am trying to show a text-box inside a div on top of image which is draggable.
I have 2 issues
- In IE 8 I am not able to click inside
text-box. - Also some problem with size
of text-box when the div is re-sized
it does go out of the parent div.
Can I restructre this peoperly so it solves both these issues ?
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这是一个相当有趣的问题。
在我看来,关于 IE8 的第一部分是文本区域内透明背景的问题。如果您将颜色应用于背景,那么您就可以按预期访问文本区域。为了让这更有趣 - 当您添加默认文本时,您只能访问该文本已存在的文本区域。
因此,我建议研究 IE 7 和 IE 8 如何处理/创建透明背景。也许会质疑它是否真的需要透明(如果你想要简单的出路)。
您提到的关于 div 延伸到父 div 的第二个问题可以通过将
overflow: hide
添加到父 div 来解决 - 在这种情况下,您应该将其添加到#dragDiv CSS 中的
项目。在 div 中使用浮动元素时通常会出现这种情况 - 您应该阅读有关浮动元素并清除它们的更多信息(clear: Both
),因为如果处理不当,它们会导致许多问题。我希望这对您有所帮助,我很想知道您是否找到了第一个问题的原因!
This is quite an interesting problem.
The first part about IE8 appears to me to be an issue with the transparent background within the text area. If you apply a colour to the background then you are able to access the text area as expected. To make this a little more intriguing - when you add default text, you can access the text area only where this text already exists.
So I would recommend investigating how IE 7 and IE 8 handles / creates transparent backgrounds. And maybe question whether it really needs to be transparent (if you want the easy way out).
The second issue that you mention about the div extending over the parent div can be fixed by adding
overflow: hidden
to the parent div - which in this case, you should add it to the#dragDiv
item within your css. This is often the case when using floating elements within a div - you should read more about floating elements and clearing them (clear: both
) as they are the cause of so many problems if not handled correctly.I hope that helped a little and I would be interested to know if you find the cause of the first issue!
IE 在输入和文本区域上有一个透明背景的错误,要解决这个问题,最好的办法是使用
transparent.gif
作为背景,然后接下来我发现 IE 不会接受 100%(或
textarea
上的任意百分比)高度,即使父 div 具有明确的高度,但如果您在textarea
上设置高度,则所有内容看起来都很好示例:这里
我发现最好使高度至少是行高的两倍,否则滚动看起来不整齐(稍微向外)框的位置),并且我还从
inDragDiv
中删除了定位,使其默认位于标题下。在 IE7 中仍然存在 1px 的差异,在该差异之下,我使用负边距进行了纠正。在 IE7 中,定位采用了它(textarea)方式。如果您仍然想使用绝对定位,您应该显式声明left: 0;
属性IE has a bug with transparent backgrounds on inputs and textareas, to get around the best thing to do is use a
transparent.gif
for the backgroundthen next I found that IE will not accept a 100% (or any percent) height on the
textarea
, even if the parent div has an explicit height, but if you set the height on thetextarea
all appears to be wellExample : HERE
I found it better to make the height at least twice the line height or the scroll looked untidy (slightly out of the box), and also I removed the positioning from the
inDragDiv
to let it default under header .. there is still a 1px difference in IE7 and below which I've corrected using a negative margin.. in IE7 the positioning was taking it, the textarea) way over to the tight.. if you still want to use absolute positioning you shouljd explicitly declare theleft: 0;
property有类似的问题-> IE8 文本框不可编辑(当我的应用程序的包装具有位置:绝对时)。单击仅在边框中起作用。填充颜色和透明也不起作用。通过此文档类型更改,问题得到解决。
资料来源: http://www.codingforums.com/showthread.php?p=1173375 #post1173375
Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.
Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375