HTML 和 CSS 定位

发布于 2024-11-05 03:40:51 字数 631 浏览 4 评论 0原文

可能的重复:
在 IE 中单击无法访问带有 z-index 的文本输入< /a>

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

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

遇到 2 个问题

  1. 我在 IE 8 中 无法点击内部 文本框。
  2. 还有尺寸问题 调整 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.

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

I have 2 issues

  1. In IE 8 I am not able to click inside
    text-box.
  2. 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

呆头 2024-11-12 03:40:51

这是一个相当有趣的问题。

在我看来,关于 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!

红颜悴 2024-11-12 03:40:51

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 background

then 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 the textarea all appears to be well

Example : 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 the left: 0; property

娇纵 2024-11-12 03:40:51

有类似的问题-> 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

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.

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

Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文