IE8中透明背景的输入框不可点击

发布于 2024-08-18 15:05:58 字数 1268 浏览 8 评论 0原文

我在表单中有一个绝对定位的输入框。输入框背景透明：

.form-page input[type="text"] {
    border: none;
    background-color: transparent;
    /* Other stuff: font-weight, font-size */
}

令人惊讶的是，我在IE8中无法点击选择该输入框。然而它在 Firefox 中运行得很好。 background: none 也会发生同样的情况。当我更改背景颜色时：

    background-color: red;

它工作正常，所以这是与透明背景相关的问题。设置边框使得只需单击输入框的边框即可选择输入框。

有没有办法让可点击的输入框在 IE8 中工作并具有透明背景？

更新：示例。取消注释background-color，输入框就可以选择了。您还可以单击选择框，然后按 Shift+Tab 将焦点置于输入框。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"] {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

原文

I have an absolutely positioned input box in a form. The input box has transparent background:

.form-page input[type="text"] {
    border: none;
    background-color: transparent;
    /* Other stuff: font-weight, font-size */
}

Surprisingly, I cannot select this input box by clicking on it in IE8. It works perfectly in Firefox however. The same happens for background: none. When I change the background color:

    background-color: red;

It works fine, so this is issue associated with transparent background. Setting a border makes the input box selectable by clicking on its border only.

Is there a workaround to have clickable input box with transparent background working in IE8?

Update: Example. Uncomment background-color and the inputbox is selectable. You can also click on the select box, and focus the input box by pressing Shift+Tab.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"] {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

ˇ宁静的妩媚 2024-08-25 15:05:58

我无法在 IE8 中重现这样的问题。完整的测试用例？您确定没有分层问题导致其他透明元素覆盖可点击区域吗？

设置background-image有什么不同吗？透明的 GIF 怎么样？

预计到达时间：好奇！这实际上是 IE7 的一个错误。对我来说，您的示例在 IE7 中展示了所描述的行为，但在 IE8 中只有在 EmulateIE7 模式下才有效；在 IE8 原生渲染中它是固定的。您通常需要使用合适的 X-UA-Compatible 标头/元来确保不会退回到 IE7 渲染；但是，是的，将 background-image 设置为透明 GIF 解决了我的问题。啧，现在这个时代我们还需要空白GIF吧？

回复收藏 0 原文

羁拥 2024-08-25 15:05:58

您必须定义一个（透明）背景图像。

以防万一有人感兴趣。建议的解决方法之一......

回复收藏 0 原文

∞琼窗梦回ˉ 2024-08-25 15:05:58

请包含输入元素的 html。

你是如何定义输入元素的？下面的代码适用于 IE8 (IE 8.0.7600 Windows)。
我在 IE8 中尝试过，并且能够很好地“选择”输入区域。

<html>

<head>

<style>
.form-page input[type="text"] {
        border: none;
        background-color: transparent;
        /* Other stuff: font-weight, font-size */
}
</style>
</head>

<body>

<input type="text" name="test" value="test" id="test"/>

</body>
</html>

Please include the html for the input element.

How did you define the input element? The code below works in IE8 (IE 8.0.7600 Windows).
I tried this in IE8 and was able to 'select' the input area just fine.

<html>

<head>

<style>
.form-page input[type="text"] {
        border: none;
        background-color: transparent;
        /* Other stuff: font-weight, font-size */
}
</style>
</head>

<body>

<input type="text" name="test" value="test" id="test"/>

</body>
</html>

回复收藏 0 原文

爱的那么颓废 2024-08-25 15:05:58

只需给输入字段一个透明的背景图像就可以了...

示例：

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}

Just give the input field a transparent background image and it will work...

Example:

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}

回复收藏 0 原文

翻了热茶 2024-08-25 15:05:58

我在 Windows 7 上使用 IE10 时发现了同样的问题。以下两种方法都为我解决了该问题。

Franky 使用透明背景图像的方法...

background:url(/images/transparent.gif);

Sketchfemme 使用不透明度为“0”的 rgba 背景颜色的方法

background-color:rgba(0,0,0,0);

Jim Jeffers 关于编辑 z-index 的建议对我不起作用。

I've found the same issue using IE10 on Windows 7. Both of the following methods fixed the issue for me.

Franky's method using a transparent background image...

background:url(/images/transparent.gif);

Sketchfemme's method using an rgba background colour with '0' opacity

background-color:rgba(0,0,0,0);

Jim Jeffers suggestion for editing the z-index's did not work for me.

回复收藏 0 原文

厌倦 2024-08-25 15:05:58

这是一个非常简单的测试用例：

<html>
    <head>
    </head>
    <body style="direction: ltr;">
        <br/><br/><br/>
        <INPUT style="WIDTH: 100%;" />

        <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
            <INPUT style="WIDTH: 100%; background-color: transparent;"/>
        </DIV>
    </body>
</html>

在 IE8 中运行时 - 您应该看到焦点位于底层文本框上，而不是绝对定位的文本框上。

我们的解决方案是设置透明背景颜色和透明背景图像：

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>

Here is a very simple test case:

<html>
    <head>
    </head>
    <body style="direction: ltr;">
        <br/><br/><br/>
        <INPUT style="WIDTH: 100%;" />

        <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
            <INPUT style="WIDTH: 100%; background-color: transparent;"/>
        </DIV>
    </body>
</html>

When running in IE8 - you should see the focus on the underlying textbox instead on the absolutely positioned textbox.

Our solution was to set both transparent background color and transparent background image:

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>

回复收藏 0 原文

千寻… 2024-08-25 15:05:58

IE以其无限的智慧决定不渲染该项目，因为它认为没有什么可以渲染的。有很多方法可以解决这个问题，但基本上你需要给 IE 一些东西来咀嚼。

将“value=x”添加到输入标记本身肯定有效。但很可能这不是最好的解决方案。简单的 color:black（没有焦点）允许对元素进行选项卡切换。将 ':focus' 添加到输入样式允许元素呈现。

试试这个：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"]:focus {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

IE in its infinite wisdom is deciding not to render the item because it thinks there is nothing to render. There are numerous ways to address this but basically you'll need to give IE something to chew on.

Adding a 'value=x' to the input tag itself definitely works. But more than likely it's not the best solution. A simple, color:black (without the focus) allows the element to be tabbed to. Adding ':focus' to the input style allows the element to render.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"]:focus {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

回复收藏 0 原文

°如果伤别离去 2024-08-25 15:05:58

正如 bobince 观察到的，这是一个 IE7 错误。有时我发现通过添加 value=" " 可以很方便地解决这个问题。根据需要使用尽可能多的不间断空格，以使可点击区域足够大。根据您的应用程序，您可能需要稍后删除它们。

回复收藏 0 原文

情魔剑神 2024-08-25 15:05:58

 background-image:url(about:blank);background-color:transparent;

 background-image:url(about:blank);background-color:transparent;

回复收藏 0 原文

寻找我们的幸福 2024-08-25 15:05:58

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

回复收藏 0 原文

哆兒滾 2024-08-25 15:05:58

实际上，就我而言，就像

text-indent: -9999px

我以前删除文本一样，不要这样做，它可以再次单击。

Actually in my case it was like

text-indent: -9999px

I used to remove the text, do not do that and it is clickable again.

回复收藏 0 原文

○愚か者の日 2024-08-25 15:05:58

这可能看起来很奇怪，但您应该尝试显式指定所涉及元素的 z 索引。这应该强制输入在应用了背景颜色/图像的元素顶部渲染。

回复收藏 0 原文

べ映画 2024-08-25 15:05:58

似乎即使使用透明 gif 技巧，如果您在 CSS 中的其他任何位置设置背景：透明，对于实际的 Web 浏览器，它也会触发 IE7 错误，并且您不会在悬停时获得光标，也无法轻松单击进入输入框。

回复收藏 0 原文

失眠症患者 2024-08-25 15:05:58

这是一个很棒的问题。如果没有这篇文章，我永远无法弄清楚发生了什么。我的解决方案是使用 rgba(0,0,0,0) 而不是透明 gif。

回复收藏 0 原文

~没有更多了~

关于作者

风启觞

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

IE8中透明背景的输入框不可点击

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

西西弗的石头怪

5397313

烟沫凡尘

一个破名字

萌︼了一个春

当爱已成负担

友情链接

IE8中透明背景的输入框不可点击

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

西西弗的石头怪

5397313

烟沫凡尘

一个破名字

萌︼了一个春

当爱已成负担

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。